Criei em meu projeto um componente "Slide show" que possui a função abaixo para efetuar o slide automático. Porém, ao ir para outra página usando a função push do useHistory history.push('/about');
, porem ao fazer isso, e voltar para a tela inicial que possui o "Slide Show", essa função do useEffect acaba sendo executada novamente, travando o slide.
Como posso resolver isso?
useEffect(() => {
var slides = document.querySelectorAll(".baner");
var imagens = document.querySelectorAll(".bc_img img");
var btns = document.querySelectorAll(".dots");
function repeat() {
let active = document.getElementsByClassName("active");
let i = 1;
var repeater = () => {
console.log(i);
setTimeout(function () {
[...active].forEach((activeSlide) => {
activeSlide.classList.remove("active");
});
slides[i].classList.add("active");
btns[i].classList.add("active");
imagens[i].classList.add("active");
i++;
if (slides.length === i) {
i = 0;
}
if (i >= slides.length) {
return;
}
repeater();
}, 5000);
};
repeater();
}
repeat();
}, []);