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