We Keep Coding

SwiperJS - I don't want that when I click on a button inside a slider, it brings that slider to the first position

When I click on a button that I have inside my slider, instead of executing what the button should do, what it does is take that slider to position 1 of the carousel. what I want is that this does not happen since it does not allow the action of the button to be executed, which is to open an overlay. I leave a video so that it is better understood.
I checked the documentation and I couldn't solve it.
This is my code:
let swiperTrending = new Swiper(".swiper-container-trending", {
slidesPerGroup: 1,
autoplay: {
delay: 3000,
},
speed: 1000,
grabCursor: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
100: {
slidesPerView: 1,
spaceBetween: 10,
},
768: {
slidesPerView: 2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 60,
},
},
});
https://sendvid.com/rkza0bku

Swiper 5.4.5 thumbs gallery multiple instances not working in same page

Swiper 5.4.5 thumbs gallery multiple instances not working in the same page swiper version 5.4.5
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
loop: true,
freeMode: true,
loopedSlides: 5, //looped slides should be the same
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop: true,
loopedSlides: 5, //looped slides should be the same
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs,
},
});

/**
* Multiple Swiper Slides
* #require Swiper v4.X
* #author palash chandra
* #author website palashchandra.xyz
*/
const multipleSwiperSlides = function() {
let sliderMain = document.querySelectorAll('.swiper-container.js-slider--main')
let sliderNav = document.querySelectorAll('.swiper-container.js-slider--nav')
let mainArray = [];
let navArray = [];
// Slider Main
sliderMain.forEach(function(element, i) {
// Push swiper instance to array
mainArray.push(
new Swiper(element, {
loop: true,
loopedSlides: 3,
})
);
});
// Slider Nav
sliderNav.forEach(function(element, i) {
var self = sliderNav;
// Push swiper instance to array
navArray.push(
new Swiper(element, {
slidesPerView: 3,
loop: true,
loopedSlides: 3,
slideToClickedSlide: true,
spaceBetween: 5,
navigation: {
nextEl: self[i].querySelector('.swiper-button-next'),
prevEl: self[i].querySelector('.swiper-button-prev')
}
})
);
});
const checkOnPage = function() {
if (sliderMain.length > 0 && sliderNav.length > 0) {
let numberOfSlides = mainArray.length || navArray.length || 0;
if (mainArray.length !== navArray.length) {
console.warn('multipleSwiperSlides: Number of main slides and nav slides is different. Expect incorrect behaviour.');
}
for (let i = 0; i < numberOfSlides; i++) {
mainArray[i].controller.control = navArray[i];
navArray[i].controller.control = mainArray[i];
}
console.log('multipleSwiperSlides: Things should be working fine. B)');
}
}
checkOnPage();
}
multipleSwiperSlides();

swiper.js | Stop swiper slide autoplay on mouse enter and start autoplay on mouse leave

How to stop swiper slide autoplay on mouse enter and start autoplay on mouse leave? I have tried .stopAutoplay() and .startAutoplay() function but not worked for me.
This is my output : click here
And here is the js code :
<script>
var slider = new Swiper ('#slider', {
slidesPerView: 1,
autoplay: 1000,
spaceBetween: 0,
loop: true,
loopedSlides: 6,
centeredSlides : true,
　disableOnInteraction: true,
autoplayDisableOnInteraction: false,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: '1.3',
breakpoints: {
600: {
slidesPerView: 1
}
}
});
var thumbs = new Swiper('#thumbs', {
centeredSlides: true,
spaceBetween: 10,
loopedSlides: 6,
loop: true,
slidesPerView: "auto",
touchRatio: 0.2,
slideToClickedSlide: true,
breakpoints: {
600: {
slidesPerView: 3
}
}
});
slider.params.control = thumbs;
thumbs.params.control = slider;
$("#slider").mouseenter(function() {
slider.autoplay.stop();
});
$("#slider").mouseleave(function() {
slider.autoplay.start();
});
$("#thumbs").mouseenter(function() {
thumbs.autoplay.stop();
});
$("#thumbs").mouseleave(function() {
thumbs.autoplay.start();
});
</script>

Try to use $el element returned from instance. It works fine.
slider.$el.on('mouseover', () => {
slider.autoplay.stop();
});
slider.$el.on('mouseleave', () => {
slider.autoplay.start();
});
Check this example:
https://codepen.io/keitoliveira/pen/XWKdXMr

Swiper Carousel Scrollbar not Accepting an Object as Argument

I'm working with the Swiper Carousel which allows for the option of a scrollbar. I can pass a string that signifies the scrollbar element but if I try to pass an object as per the docs here, I get an error: Cannot read property 'offsetWidth' of undefined name: TypeError
I've tracked this to the set method here where e.track should be an object where each key is a number and the value should be the element (scrollbar):
Again this works if I set the scrollbar option to a string, but not an object as per the docs. Has anyone seen this before/have any ideas how to get past it? Code below:
This version does not work:
var mySwiper = new Swiper ('.swiper-container', {
loop: false,
slidesPerView: 'auto',
slidesPerGroup: 1,
clickable: true,
observer: true,
observeParents: true,
speed: 400,
spaceBetween: 10,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
observer: true,
scrollbar: {
el:'.swiper-scrollbar',
snapOnRelease:true,
draggable:true,
hide: false
},
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loopedSlides: 2
}
}
})
This version does (but I cannot add the extra arguments - e.g. draggable & hide):
var mySwiper = new Swiper ('.swiper-container', {
loop: false,
slidesPerView: 'auto',
slidesPerGroup: 1,
clickable: true,
observer: true,
observeParents: true,
speed: 400,
spaceBetween: 10,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
observer: true,
scrollbar: '.swiper-scrollbar',
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loopedSlides: 2
}
}
})
EDIT: As a follow up, I'm not entirely sure which version of Swiper my client is using, but playing around on https://jsfiddle.net/ makes me think they have an outdated version. I've asked them to update and will close this if that is the case

Passing parameters with array in javascript

I have several instances of slider, and I need to pass the same parameters to every one.
I assume that I need array for that, but since I'm newbie in JS, I'm unsure how to do it properly.
Parameters looks for example like this:
spaceBetween: 20,
slidesPerView: 5,
breakpoints: {
600: {
slidesPerView: 2
},
991: {
slidesPerView: 3
},
1200: {
slidesPerView: 4
}
}
and slider instance:
var swiper1 = new Swiper('.swiper1', {
prevButton: '.b-prev-1',
nextButton: '.b-next-1',
//here I need to get the rest of the parameters
});
Thank you :)

Hi you can write like below
var swiper1 = new Swiper('.swiper1', [
prevButton: '.b-prev-1',
nextButton: '.b-next-1',
//here I need to get the rest of the parameters
]);

Try it
function(arrayP){
for(var i = 0; i < arrayP.length; i++){
alert(arrayP[i]); //no .value here
}
}
link:-Passing an array as parameter in JavaScript

You can use jQuery's $.extend() :
var extraDetails = {
spaceBetween: 20,
slidesPerView: 5,
breakpoints: {
600: {
slidesPerView: 2
},
991: {
slidesPerView: 3
},
1200: {
slidesPerView: 4
}
}
};
var swiper1 = new Swiper('.swiper1', $.extend({
prevButton: '.b-prev-1',
nextButton: '.b-next-1'
},
extraDetails
));

The most eloquent way of doing this in ES5 is to create a new config object for each slide, but base it off of a common object using $.extend. (Object.assign() is similar in VanillaJS)
var commonConfig = { spaceBetween: 20, slidesPerView: 5, breakPoints: { ... } };
var swiper1 = $.extend(true, {}, commonConfig, {
prevButton: '.b-prev-1',
nextButton: '.b-next-1'
});
var swiper2 = $.extend(true, {}, commonConfig, {
prevButton: '.b-prev-2',
nextButton: '.b-next-2'
});
It'd be cool to see more code -- I imagine you could loop over your DOM elements and create the config on-the-fly for each one. Something like:
$('.swiper').each(function(idx, el){
$(this).swiper({
spaceBetween: 20,
slidesPerView: 5,
breakPoints: { ... },
prevButton: '.b-prev-'+(idx+1),
nextButton: '.b-next-'+(idx+1)
});
});