Autoplay Control in Swiper
var swiper = new Swiper(".swiperslides", {
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 30,
loop: true,
speed: 6000, // Transition speed
loopAdditionalSlides: 3, // Add duplicate slides for seamless looping
allowTouchMove: false,
loopFillGroupWithBlank: false,
autoplay: {
delay: 1, // VERY short delay for smoothness
disableOnInteraction: false,
stopOnLastSlide: false, // Ensure it loops continuously
},
on: {
beforeInit: function (swiper) {
swiper.wrapperEl.style.transitionTimingFunction = "linear";
},
init: function () {
console.log("Swiper initialized");
const swiperEl = document.querySelector('.swiperslides');
// Stop autoplay and disable transitions on mouseenter
swiperEl.addEventListener('mouseenter', () => {
swiper.autoplay.stop(); // Stop autoplay
swiper.wrapperEl.style.transition = 'none'; // Disable transitions
console.log("Autoplay stopped and transitions disabled on mouseenter");
});
// Restore transitions and restart autoplay on mouseleave
swiperEl.addEventListener('mouseleave', () => {
swiper.wrapperEl.style.transition = ''; // Restore transitions
swiper.autoplay.start(); // Restart autoplay
console.log("Autoplay started and transitions restored on mouseleave");
});
}
},
breakpoints: {
0: {
slidesPerView: 1.2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
},
},
});
swiper.autoplay.start(); // Ensure autoplay is initially started
}
its stops immediatly but on mouseove auto play should start from 6000
### Fix:
Modify the `mouseleave` event handler to restart autoplay with the correct delay:
if (jQuery('.swiperslides').length) {
var swiper = new Swiper(".swiperslides", {
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 30,
loop: true,
speed: 6000, // Transition speed
loopAdditionalSlides: 3, // Add duplicate slides for seamless looping
allowTouchMove: false,
loopFillGroupWithBlank: false,
autoplay: {
delay: 1, // VERY short delay for smooth scrolling effect
disableOnInteraction: false,
stopOnLastSlide: false, // Ensure it loops continuously
},
on: {
beforeInit: function (swiper) {
swiper.wrapperEl.style.transitionTimingFunction = "linear";
},
init: function () {
console.log("Swiper initialized");
const swiperEl = document.querySelector('.swiperslides');
// Stop autoplay and disable transitions on mouseenter
swiperEl.addEventListener('mouseenter', () => {
swiper.autoplay.stop(); // Stop autoplay
swiper.wrapperEl.style.transition = 'none'; // Disable transitions
console.log("Autoplay stopped and transitions disabled on mouseenter");
});
// Restore transitions and restart autoplay on mouseleave with correct speed
swiperEl.addEventListener('mouseleave', () => {
swiper.wrapperEl.style.transition = ''; // Restore transitions
swiper.params.autoplay.delay = 6000; // Set correct delay
swiper.autoplay.start(); // Restart autoplay
console.log("Autoplay started with correct speed on mouseleave");
});
}
},
breakpoints: {
0: {
slidesPerView: 1.2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
},
},
});
swiper.autoplay.start(); // Ensure autoplay is initially started
}### Explanation:
1. When `mouseenter` is triggered, autoplay is stopped, and transitions are disabled.
2. When `mouseleave` is triggered:
– The transitions are restored.
– The autoplay delay is manually set to `6000ms` (`swiper.params.autoplay.delay = 6000`).
– Autoplay restarts.
This ensures that after mouseover, the autoplay continues with the intended delay. 🚀
### **Updated Code with Proper Transition Reset:**
if (jQuery('.swiperslides').length) {
var swiper = new Swiper(".swiperslides", {
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 30,
loop: true,
speed: 6000, // Transition speed
loopAdditionalSlides: 3, // Add duplicate slides for seamless looping
allowTouchMove: false,
loopFillGroupWithBlank: false,
autoplay: {
delay: 1, // Very short delay for smooth effect
disableOnInteraction: false,
stopOnLastSlide: false, // Ensure it loops continuously
},
on: {
beforeInit: function (swiper) {
swiper.wrapperEl.style.transitionTimingFunction = "linear";
},
init: function () {
console.log("Swiper initialized");
const swiperEl = document.querySelector('.swiperslides');
const wrapperEl = swiper.wrapperEl;
// Stop autoplay and disable transitions on mouseenter
swiperEl.addEventListener('mouseenter', () => {
swiper.autoplay.stop(); // Stop autoplay
wrapperEl.style.transition = 'none'; // Disable transitions
// Force reflow to apply styles immediately
void wrapperEl.offsetHeight;
console.log("Autoplay stopped and transitions disabled on mouseenter");
});
// Restore transitions and restart autoplay on mouseleave
swiperEl.addEventListener('mouseleave', () => {
wrapperEl.style.transition = ''; // Restore transitions
swiper.params.autoplay.delay = 6000; // Set correct delay
swiper.autoplay.start(); // Restart autoplay
console.log("Autoplay started with correct speed on mouseleave");
});
}
},
breakpoints: {
0: {
slidesPerView: 1.2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
},
},
});
swiper.autoplay.start(); // Ensure autoplay is initially started
}### **Fixes & Improvements:**
1. **Forced reflow (`void wrapperEl.offsetHeight;`)**
– This ensures the transition removal is properly applied before restoring it.
2. **Resetting autoplay delay (`swiper.params.autoplay.delay = 6000;`)**
– Ensures autoplay restarts with the correct transition speed.
Now, the autoplay should stop smoothly on `mouseenter` and restart properly at **6000ms speed** when the mouse leaves. 🚀