Javascript - Как остановить 5-секундный таймер, если нажата кнопка «Предыдущий» или «Следующий»

https://jsfiddle.net/2uLrmcjx/

Вот JSfiddle для проблемы, над которой я работаю (изображения не включены).

Я считаю, что решение состоит в том, чтобы обернуть мои прослушиватели событий click для prevBtn и nextBtn в оператор if, но я не могу решить это.

nextBtn.addEventListener('click',() => {
  if (counter >= carouselImages.length -1) return
  carouselSlide.style.transition = "transform 0.4s ease-in-out"
  counter++
  carouselSlide.style.transform = 'translateX(' + (-size * counter ) + 'px)'
})

prevBtn.addEventListener('click',() => {
  if (counter <= 0) return
  carouselSlide.style.transition = "transform 0.4s ease-in-out"
  counter--
  carouselSlide.style.transform = 'translateX(' + (-size * counter ) + 'px)'
})

// Timer
setInterval( () => {nextBtn.click();}, 5000);

Вот область, на которой я сосредоточен. Заранее благодарю за любую помощь!

Всего 1 ответ


Сохранить ссылку на интервал в переменной. let interval = setInterval( () => {slider();}, 5000); clearInterval(interval);

не вызывайте событие nextBtn с интервалом, иначе слайд не будет работать, потому что в каждом событии щелчка nextBtn интервал будет очищаться. Используйте отдельную функцию для слайда и вызова из интервала, а при нажатии кнопки действие сбрасывает интервал.


Есть идеи?

10000