Как сделать, чтобы слайд автоматически переключался через 5 секунд?

Question

[Johannes Cruijff]

Есть слайдер. У него настроено автопереключение через каждые 5 секунд. Но(!) если пользователь сам перелистнёт картинку, следующая включится уже не через 5, а через 2,5 сек, или даже меньше.

В идеале нужно сделать так, чтобы в любом случае, даже после нажатия кнопки, слайды автоматически листались ровно по 5 сек каждый. Поможете?

Код здесь: codepen.io/anon/pen/PvePqg
/*Временно отключён setInterval, когда пользователь переключает фотографии самостоятельно, надо было пофиксить на скорую руку*/

Comments

[Somewhere Intech]

сами почти ответили-осталось завести снова setInterval на туже переменную заново после клика, нужно переписать чуть код.. Пример на скорую руку:

const feedbackSlider = () => {
    let slideIndex = 1,
        items = document.querySelectorAll(".feedback-slider-item"),
        prev = document.querySelector(".main-prev-btn"),
        next = document.querySelector(".main-next-btn");

    const showSlides = (n) => {
        if (n > items.length) {
            slideIndex = 1;
        }
        if (n < 1) {
            slideIndex = items.length;
        }
        items.forEach((item) => {
            item.classList.add("animated");
            item.style.display = "none";
        });
        items[slideIndex - 1].style.display = "block";
    }

    const plusSlides = (n) => {
        showSlides(slideIndex += n);
    }

    showSlides(slideIndex);

    prev.addEventListener("click", () => {
        clearInterval(sliderInterval);
        plusSlides(-1);
        items[slideIndex - 1].classList.remove("slideInLeft");
        items[slideIndex - 1].classList.add("slideInRight");
        sliderInterval = auto();
        }),

        next.addEventListener("click", () => {
        clearInterval(sliderInterval);
        plusSlides(1);
        items[slideIndex - 1].classList.remove("slideInRight");
        items[slideIndex - 1].classList.add("slideInLeft");
        sliderInterval = auto();
        });
    const auto = () => setInterval (() => {
        plusSlides(1);
        items[slideIndex - 1].classList.remove("slideInRight");
        items[slideIndex - 1].classList.add("slideInLeft");
        }, 5000);

    let sliderInterval = auto();
}

Answer 1

[Somewhere Intech]

Так будет лучше, мне кажется:

const feedbackSlider = () => {
    let slideIndex = 1,
        items = document.querySelectorAll(".feedback-slider-item"),
        prev = document.querySelector(".main-prev-btn"),
        next = document.querySelector(".main-next-btn");

    const showSlides = (n) => {
        if (n > items.length) {
            slideIndex = 1;
        }
        if (n < 1) {
            slideIndex = items.length;
        }
        items.forEach((item) => {
            item.classList.add("animated");
            item.style.display = "none";
        });
        items[slideIndex - 1].style.display = "block";
    }

    const plusSlides = (n, auto=false) => {
        showSlides(slideIndex += n);
        if (!auto) { 
        	clearInterval(sliderInterval);
        	sliderInterval = timer();
        }
        items[slideIndex - 1].classList.remove(n>0?"slideInRight":"slideInLeft");
        items[slideIndex - 1].classList.add(n>0?"slideInLeft":"slideInRight");  
    }
    showSlides(slideIndex);
    prev.addEventListener("click", () => { plusSlides(-1 ) });
    next.addEventListener("click", () => { plusSlides( 1 ) });
    const timer = () => setInterval(()=> { plusSlides(1,1) }, 5000);
    let sliderInterval = timer();
}

Comments

[Johannes Cruijff]

Огромное спасибо!