I have a working slider. I would like to to autoplay the slides and stop the autoplay when user clicks the next or previous button.
I have tried to include setInterval-function but I am not sure how I should apply it in order to make it work. So far I did not manage to do this.
enter code here
var interleaveOffset = 0.2;
var swiperOptions = {
loop: true,
speed: 500,
grabCursor: true,
watchSlidesProgress: true,
mousewheelControl: true,
keyboardControl: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
on: {
progress: function() {
var swiper = this;
for (var i = 0; i < swiper.slides.length; i++) {
var slideProgress = swiper.slides[i].progress;
var innerOffset = swiper.width * interleaveOffset;
var innerTranslate = slideProgress * innerOffset;
swiper.slides[i].querySelector(".slide-inner").style.transform =
"translate3d(" + innerTranslate + "px, 0, 0)";
}
},
touchStart: function() {
var swiper = this;
for (var i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = "";
}
},
setTransition: function(speed) {
var swiper = this;
for (var i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = speed + "ms";
swiper.slides[i].querySelector(".slide-inner").style.transition =
speed + "ms";
}
}
}
};
var swiper = new Swiper(".swiper-container", swiperOptions);I expect that slider plays the slides automatically and the autoplay stops when user clicks either next or previous button.
Use autoplay
autoplay: {
delay: 2500,
disableOnInteraction: true,
},
disableOnInteraction will disable autoplay when you will click on arrows.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments