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.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

Swiper.js Loop: true not working when slidesPerView and slidesPerColumn set

When using the very popular swiper.js, normally works as expected. However currently loop = true is not working because we have slidesPerView and slidesPerColumn enabled.
Currently have:
var mySwiper = new Swiper ('#my-swiper', {
slidesPerView: 3,
slidesPerColumn: 2,
spaceBetween: 30,
speed: 2000,
loop: true,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
Several others have ran into a similar issue but not clear solution. One noted they added to help resolve the issue:
setTimeout(function(){
mySwiper.update(true);
mySwiper.slideTo(0, 0)
}, 100);
Tried adding after the above code block but they there is no motion at all. If I added it inside the above code block then it shows one large thumbnail per slide vs 6. Any thoughts?

The developer has confirmed currently slidesPerColumn is not compatible with looping which is why it breaks. Hopefully this will be fixed soon. In the meantime, my workaround is have to instances to simulate 2 rows. Not ideal for a couple reasons but the end result for the user at least is the same.

In 2022 with Swiper v8.4.2 :
-> set a number of slides per view by default,
otherwise Swiper fail to enable infinite loop
<div class="swiper-wrapper">
<!-- swiper-slides ... -->
<div class="swiper-slide">
<img src="..." alt="..."/>
</div>
<!-- ... swiper-slides -->
</div>
my config Swiper :
var init_Swiper = new Swiper('#related_prods',{
// Swiper options :
direction : 'horizontal',
// set a number of slides per view by default
// otherwise Swiper fail to enable infinite loop
slidesPerView: 4,
spaceBetween: 16,
centerInsufficientSlides : true,
centeredSlidesBounds : true,
loop: true,
autoHeight: false,
grabCursor: true,
mousewheel: false,
breakpoints: {
1024: {
slidesPerView: 4,
spaceBetween: 16,
},
767: {
slidesPerView: 3,
spaceBetween: 16,
},
0 : {
slidesPerView: 2,
spaceBetween: 10,
}
},
navigation: {
nextEl: ".swiper-related_products-next",
prevEl: ".swiper-related_products-prev",
},
});

Swiper-Slide-Active class when Swiper is multirow

I have Swiper set to show 2 rows per column, but when I do this then the Swiper-Slide-Active class are not properly set, i.e. this class is not applied to the slides (2) that are shown in the center of the swiper.
Any idea what am i doing wrong here?, settings for the swiper below:
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
slidesPerColumn: 2,
spaceBetween: 20,
simulateTouch: true,
centeredSlides:true,
slideToClickedSlide: true,
paginationClickable:true,
grabCursor:true,
coverflow: {
rotate: 45,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: false
}
});

Currently, multirow Swiper is not compatible with slidesPerView:'auto', so if it is possible for your layout, switch slidesPerView to some fixed value