Eai comunidade, sou novo. Venho para pedir ajuda a pessoas mais experientes quanto ao seguinte problema: Quero fazer um banner de imagens em um site em que as imagens passam a cada 4 segundos, porém existem dois botões (um na extremidade esquerda e outro na direita) que, ao serem pressionados, PARAM o setInterval que criei e fazem com que seja necessário pressionar os botões para navegar entre as imagens. O problema é que não consegui programar o botão de retorno corretamente. Ele funciona no 1º clique e depois em diante retorna um erro. Deixarei o código a seguir, adianto que é um código meio extenso.
let time = 4000,
currentImageIndex = 0,
images = document.querySelectorAll("#slider img")
max = images.length;
function nextImage() {
images[currentImageIndex].classList.remove("selected")
currentImageIndex++
if(currentImageIndex >= max)
currentImageIndex = 0
images[currentImageIndex].classList.add("selected")
}
function returnImage(){
images[currentImageIndex].classList.remove("selected")
currentImageIndex--
if(currentImageIndex <= 0)
currentImageIndex = max
images[currentImageIndex].classList.add("selected")
}
function button_next(){
console.log("next")
nextImage();
stop();
}
function button_return(){
console.log("return")
returnImage();
stop();
}
var rollInterval = setInterval(() => {
nextImage()}, time)
function start() {
rollInterval
}
function stop() {
clearInterval(rollInterval)
}
window.addEventListener("load", start)
Me ajudando com essa parte já é mais que o suficiente e fico muito agradecido, entretanto se alguém puder responder ainda sobre se é possível eu dar algum tipo de reset no setInterval ao invés de PARÁ-LO, seria muito mais interessante para meu projeto. Sei que esta função não existe nativamente.