Swiper Autoplay Control
User
var swiper = new Swiper(".swiperslides", {
slidesPerView: 3,
spaceBetween: 30,
loop: true,
speed: 8000,
autoplay: {
delay:0,// Set a short delay for better autoplay handling
disableOnInteraction: true,
pauseOnMouseEnter:true,
},
on: {
beforeInit: function (swiper) {
swiper.wrapperEl.style.transitionTimingFunction = "linear";
},
slideChangeTransitionEnd: function () {
swiper.autoplay.start(); // Ensure autoplay continues
},
},
breakpoints: {
0: {
slidesPerView: 1.2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
},
},
});
slidesPerView: 3,
spaceBetween: 30,
loop: true,
speed: 8000,
autoplay: {
delay:0,// Set a short delay for better autoplay handling
disableOnInteraction: true,
pauseOnMouseEnter:true,
},
on: {
beforeInit: function (swiper) {
swiper.wrapperEl.style.transitionTimingFunction = "linear";
},
slideChangeTransitionEnd: function () {
swiper.autoplay.start(); // Ensure autoplay continues
},
},
breakpoints: {
0: {
slidesPerView: 1.2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
},
},
});
stop autplay when mouse hover
Assistant
To stop the autoplay when the mouse hovers over the Swiper slides, you can modify the `pauseOnMouseEnter` option in the `autoplay` settings and add an additional event listener for mouse enter and leave events. Here’s how to implement it:
var swiper = new Swiper(".swiperslides", {
slidesPerView: 3,
spaceBetween: 30,
loop: true,
speed: 8000,
autoplay: {
delay: 0, // Set a short delay for better autoplay handling
disableOnInteraction: true,
},
on: {
beforeInit: function (swiper) {
swiper.wrapperEl.style.transitionTimingFunction = "linear";
},
slideChangeTransitionEnd: function () {
swiper.autoplay.start(); // Ensure autoplay continues
},
},
breakpoints: {
0: {
slidesPerView: 1.2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
},
},
});
// Add event listeners for mouse enter and leave
swiper.wrapperEl.addEventListener('mouseenter', function() {
swiper.autoplay.stop(); // Stop autoplay on mouse enter
});
swiper.wrapperEl.addEventListener('mouseleave', function() {
swiper.autoplay.start(); // Restart autoplay on mouse leave
});### Explanation:
1. **Event Listeners**: The `mouseenter` event listener stops the autoplay when the mouse hovers over the Swiper container, and the `mouseleave` event listener restarts it when the mouse leaves the container.
2. **Autoplay Control**: The `swiper.autoplay.stop()` method is called to stop the autoplay, while `swiper.autoplay.start()` restarts it.
This way, the autoplay will pause when the user hovers over the Swiper and resume when they move the mouse away.