setInterval / clearInterval
 

Привет всем!
У меня следующая проблема. Использовал setInterval чтобы автоматически перелистывать страницы. Но в то время когда слайды сами листаются нажать на стрелку вперед или назад слайды начинают неадекватно прыгать туда сюда. Как я понимаю, нужно использовать clearInterva. Только я не смог его применить. Тут код реализации слайдов. Подскажите пожалуйста куда воткнуть clearInterval l чтобы это дело нормально работало?)
Заранее большое спасибо!! :)

let slides = document.querySelectorAll(".feedback-slider-item"),
        prev = document.querySelector(".main-prev-btn"),
        next = document.querySelector(".main-next-btn"),
        slideIndex = 1;

    showSlides(slideIndex);
    
    function showSlides(n) {
        (n > slides.length) ? slideIndex = 1 : "" ;
        (n < 1) ? slideIndex = slides.length : "";
             
        slides.forEach(item => item.style.display = "none");
        slides[slideIndex - 1].style.display = "block";
    }

    //let timerId = setInterval(() => showSlides(slideIndex), 2000);

    function plusSlides(n) {    
        //clearTimeout(timerId);
        setInterval(() => showSlides(slideIndex += n), 2000);        
    }
    next.addEventListener("click", () => { plusSlides(1); });   
    prev.addEventListener("click", () => { plusSlides(-1); });

Alex196,

let slides = document.querySelectorAll(".feedback-slider-item"),
        prev = document.querySelector(".main-prev-btn"),
        next = document.querySelector(".main-next-btn"),
        slideIndex = -1,
        timerId;

    function showSlides(n) {
        clearTimeout(timerId);
        slideIndex += (n + slides.length);
        slideIndex %= slides.length;
        slides.forEach((item, i)  => item.style.display = slideIndex == i ? "block" : "none");
        timerId = window.setTimeout(showSlides, 2000, n)
    }
    showSlides(1);
    next.addEventListener("click", () => { showSlides(1); });
    prev.addEventListener("click", () => { showSlides(-1); });

Отлично работает!! Большое спасибо!