Решил сделать слайдер, для навигации по слайдам использую три точки снизу, которые листают слайды. setInterval меняет слайды каждые 3 секунды, но если кликнуть на точку, например, на второй секунде, то таймер не перезапускается, он уже меняет слайд через секунду. Пробовал clearInterval, но он полностью останавливает слайдер. Как сделать так, чтобы setInterval начинал работать заново после клика?
let slides = document.querySelectorAll('.slide');
let dots = document.querySelectorAll('.slider__button');
let slideIndex = 0;
function activeSlide(n) {
for (let slide of slides) {
slide.classList.remove('active');
}
slides[n].classList.add('active');
}
function activeDot(n) {
for (let dot of dots) {
dot.classList.remove('active');
}
dots[n].classList.add('active');
}
function currentSlide(index) {
activeSlide(index);
activeDot(index);
}
function nextSlide() {
if (slideIndex == slides.length - 1) {
slideIndex = 0;
currentSlide(slideIndex)
} else {
slideIndex++;
currentSlide(slideIndex)
}
}
dots.forEach((item, indexDot) => {
item.addEventListener('click', function() {
slideIndex = indexDot;
currentSlide(slideIndex);
})
})
setInterval(nextSlide, 3000);