0

Решил сделать слайдер, для навигации по слайдам использую три точки снизу, которые листают слайды. 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);
1
  • Как вариант можешь остановить слайдер, когда навел мышь на слайдер, и запускать когда убрал мышь со слайда. Как сделать? товарищ ниже ответил.
    – Elmir
    25 мар в 15:53

1 ответ 1

1

Скорее всего это должно выглядеть так:

let interval;

dots.forEach((item, indexDot) => {
    item.addEventListener('click', function() {
        slideIndex = indexDot;
        currentSlide(slideIndex);
        clearInterval(interval);
        interval = setInterval(nextSlide, 3000);
    })
})

interval = setInterval(nextSlide, 3000);
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.