单击幻灯片上的下一个或上一个按钮时创建新间隔

Question

I have made an auto slide with interval of 8s, then i've added a previous and a next button that work but my problem now is that the interval is of course still running. Instead of that, I would like to make new interval each time I click on a button. Could someone help me please? Thank you in advance:) have a good day

javascript

const prev = document.querySelector('.slider .fa-chevron-circle-left');
const next = document.querySelector('.slider .fa-chevron-circle-right');

setInterval(function() {
    var active = document.querySelector('.show');
    active.classList.remove('show');
    if (active.nextElementSibling && active.nextElementSibling !== next && active.nextElementSibling !== prev) {
        active.nextElementSibling.classList.add('show');
    } else {
        active.parentElement.firstElementChild.classList.add('show');
    }    
}, 8000);
    
next.addEventListener('click', function() {
    var nextSlide;
    var active = document.querySelector('.show');
    active.classList.remove('show');
    nextSlide = active.nextElementSibling && active.nextElementSibling !== next && active.nextElementSibling !== prev ? active.nextElementSibling.classList.add('show') : active.parentElement.firstElementChild.classList.add('show');
})

prev.addEventListener('click', function() {
    var prevSlide;
    var active = document.querySelector('.show');
    active.classList.remove('show');
    prevSlide = active.previousElementSibling && active.previousElementSibling !== next && active.previousElementSibling !== prev ? active.previousElementSibling.classList.add('show') : active.parentElement.children[2].classList.add('show');
})

html

 <div class="slider">
    <div class="slide show"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <i class="fas fa-chevron-circle-left"></i>
    <i class="fas fa-chevron-circle-right"></i>
</div>

Answer 1

You should store the interval ID returned by setInterval function, then clear it in event handlers:

const intervalFunction = () => {
    var active = document.querySelector('.show');
    active.classList.remove('show');
    if (active.nextElementSibling && active.nextElementSibling !== next && active.nextElementSibling !== prev) {
      active.nextElementSibling.classList.add('show');
    } else {
      active.parentElement.firstElementChild.classList.add('show');
    }    
}

let intervalId = setInterval(intervalFunction, 8000);

next.addEventListener('click', function() {
    clearInterval(intervalId)
    intervalId = setInterval(intervalFunction, 8000);
    // ...
})

Answer 2

You can try this, I just clear the interval and restart the interval after the next/prev button clicked.

function startSlider() {
    return setInterval(function() {
        var active = document.querySelector('.show');
        active.classList.remove('show');
        if (active.nextElementSibling && active.nextElementSibling !== next && active.nextElementSibling !== prev) {
            active.nextElementSibling.classList.add('show');
        } else {
            active.parentElement.firstElementChild.classList.add('show');
        }    
    }, 8000)
}

var slideInterval = startSlider();
    
next.addEventListener('click', function() {
    var nextSlide;
    var active = document.querySelector('.show');
    active.classList.remove('show');
    nextSlide = active.nextElementSibling && active.nextElementSibling !== next && active.nextElementSibling !== prev ? active.nextElementSibling.classList.add('show') : active.parentElement.firstElementChild.classList.add('show');
    clearInterval(slideInterval);
    slideInterval = startSlider();
})

prev.addEventListener('click', function() {
    var prevSlide;
    var active = document.querySelector('.show');
    active.classList.remove('show');
    prevSlide = active.previousElementSibling && active.previousElementSibling !== next && active.previousElementSibling !== prev ? active.previousElementSibling.classList.add('show') : active.parentElement.children[2].classList.add('show');
    clearInterval(slideInterval);
    slideInterval = startSlider();
})