Возобновление авто-слайдера на чистом JS
Изучаю JS, пытаюсь сделать слайдер, который будет показывать слайд с классом active, всё работает отлично, если переключать вручную, но я хочу сделать чтобы слайдер сам прокручивался и при нажатии "Вперед" или " Назад" интервал прокрутки останавливался и возобновлялся спустя, например, 5 секунд... Я сделал что слайды просто прокручиваются каждые 2 сек, при нажатии на любую кнопку я делаю ClearInterval чтобы дальше не шло прокручивание(через 2 сек), а шло через 5 сек... Как я думаю, надо будет делать интервал для интервала или как?? кто знает подскажите, заранее спасибо!
const prev = document.getElementById('btn-prev'), // кнопка назад
next = document.getElementById('btn-next'), // кнопка вперед
slides = document.querySelectorAll('.slide'), // слайды (фото)
let index = 0; // Начальное положение
const activeSlide = n => { // Показ и изменение слайдов по классу active
for(slide of slides) {
slide.classList.remove('active');
}
slides[n].classList.add('active');
}
const prepareCurrentSlide = index => { //В будущем под слайдером сделаю точки, на которых будет показано какой сейчас слайд + по ним можно будет переключаться
activeSlide(index);
}
const nextSlide = () => { //Функция переключения на след. слайд
if (index == slides.length - 1) {
index = 0;
prepareCurrentSlide(index);
} else {
index++;
prepareCurrentSlide(index);
}
}
const prevSlide = () => { //Функция переключения на . слайд
if (index == 0) {
index = slides.length - 1;
prepareCurrentSlide(index);
} else {
index--;
prepareCurrentSlide(index);
}
}
next.addEventListener('click',() => { // Когда я нажимаю кнопку Next (вперед)
nextSlide();
clearInterval(interval);
});
prev.addEventListener('click',() => { // Когда я нажимаю кнопку Prev (назад)
prevSlide();
clearInterval(interval);
});
const interval = setInterval(nextSlide, 2000); //Интервал просто прокрутки слайдов каждые 2 сек