Hice una diapositiva automática con un intervalo de 8 segundos, luego agregué un botón anterior y uno siguiente que funcionan, pero mi problema ahora es que el intervalo, por supuesto, aún se está ejecutando. En lugar de eso, me gustaría hacer un nuevo intervalo cada vez que hago clic en un botón. ¿Podría alguien ayudarme por favor? Gracias de antemano :) buen día
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>Debe almacenar el ID de intervalo devuelto por la función setInterval , luego borrarlo en los controladores de eventos:
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); // ... })Puede probar esto, simplemente borro el intervalo y reinicio el intervalo después de hacer clic en el botón siguiente/anterior.
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(); })