make new interval when clicking on next or previous button on a slide

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>

2 answers

  • answered 2022-04-16 11:17 Igor Moraru

    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);
        // ...
    })
    

  • answered 2022-04-16 11:24 Kenneth Ong

    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();
    })
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum