Где поставить setInterval и clearInterval
У меня есть рабочий слайдер. Я хотел бы автоматически воспроизводить слайды и останавливать автовоспроизведение, когда пользователь нажимает следующую или предыдущую кнопку.
Я попытался включить функцию setInterval, но я не уверен, как мне ее применить, чтобы она работала. Пока мне это сделать не удалось.
введите код сюда
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);Я ожидаю, что слайдер автоматически воспроизводит слайды, и автовоспроизведение останавливается, когда пользователь нажимает кнопку «Далее» или «Предыдущая».
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Используйте autoplay
autoplay: {
delay: 2500,
disableOnInteraction: true,
},
disableOnInteraction отключит автозапуск при нажатии на стрелки.
Привет! Это оказалось самым близким правильным ответом. Мне просто нужно было применить autoplay: true; к параметрам swiper, и теперь это работает! Спасибо.
С моей головы вы можете использовать что-то вроде этого
let timer = null
const startSwiping = () => {
timer = setInterval(() => {
swiper.slideNext(100); // transition duration (ms) as argument
}, 500)
}
const stopSwiping = () => clearInterval(timer)
Я не пробовал, но документы Swiper не показывают никаких других вариантов, кроме swiper.slideNext(speed)
Я пробовал, но, к сожалению, автозапуск все еще не работает.
Извините, замените setTimeout на setInterval и clearTimeout на clearInterval. Тайм-аут сработает только один раз. А если вам нужно начать играть, просто вызовите функцию startSwiping(). Когда хочешь остановиться, звони stopSwiping()
Спасибо за ваш ответ! Я попытался применить автозапуск в конце javaScript, но ничего не происходит. Есть ли какое-то конкретное место в коде, куда я должен его поместить? * Редактировать: на самом деле, когда я помещаю автозапуск в конец, кнопки больше не работают.