Swiper Autoplay Control Fix
var swiper = new Swiper(".swiperslides", {
slidesPerView: "auto",
centeredSlides: false,
spaceBetween: 30,
loop: true,
loopAdditionalSlides: 3, // Ensure smooth looping
speed: 6000,
allowTouchMove: false,
loopFillGroupWithBlank: false,
autoplay: {
delay: 1, // Continuous autoplay
disableOnInteraction: true,
pauseOnMouseEnter:true,
stopOnLastSlide: false,
},
on: {
beforeInit: function (swiper) {
swiper.wrapperEl.style.transitionTimingFunction = "linear";
},
},
breakpoints: {
0: {
slidesPerView: 1.2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
},
},
});
swiper.autoplay.start();
}
please check above code that does not stop immediatly on mouse over
### Fix:
Try explicitly handling the `mouseenter` and `mouseleave` events for better control:
#### **Updated Code**
if (jQuery('.swiperslides').length) {
var swiper = new Swiper(".swiperslides", {
slidesPerView: "auto",
centeredSlides: false,
spaceBetween: 30,
loop: true,
loopAdditionalSlides: 3, // Ensure smooth looping
speed: 6000,
allowTouchMove: false,
loopFillGroupWithBlank: false,
autoplay: {
delay: 1, // Continuous autoplay
disableOnInteraction: false, // Ensure autoplay resumes after interaction
stopOnLastSlide: false,
},
on: {
beforeInit: function (swiper) {
swiper.wrapperEl.style.transitionTimingFunction = "linear";
},
},
breakpoints: {
0: {
slidesPerView: 1.2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
},
},
});
// Manually pause and resume autoplay on mouse enter/leave
jQuery('.swiperslides').on('mouseenter', function () {
swiper.autoplay.stop();
});
jQuery('.swiperslides').on('mouseleave', function () {
swiper.autoplay.start();
});
swiper.autoplay.start();
}### **Key Fixes:**
1. **Removed `pauseOnMouseEnter: true`** – Swiper’s built-in pause is sometimes inconsistent.
2. **Used `mouseenter` & `mouseleave` manually** – Directly stopping/starting autoplay for better control.
3. **Set `disableOnInteraction: false`** – Ensures autoplay continues even after user interaction.
This should make the autoplay stop **immediately** on hover and resume when the mouse leaves. Let me know if you need further tweaks! 🚀