Vamos lá, eu criei uma Home com um videoslider de background que passa de video em video conforme voce clica nos botões, porém, pensei em tentar automatizar este processo de click no botão com um intervalo de tempo para que continue funcionando normalmente as animações de transição CSS ja aplicadas, tem como eu automatizar os clicks em cada nav-btn a cada 10 segundos por exemplo?
Segue o código HTML
<section class="home">
<video class="video-slide" src="image/assets/combustivel.mp4" autoplay muted loop onended=""></video>
<video class="video-slide" src="image/assets/colheita1.mp4" autoplay muted loop></video>
<video class="video-slide" src="image/assets/mineracao.mp4" autoplay muted loop></video>
<video class="video-slide" src="image/assets/video_estrada.mp4" autoplay muted loop></video>
<video class="video-slide" src="image/assets/colheitadeira.mp4" autoplay muted loop></video>
<video class="video-slide" src="image/assets/estrada.mp4" autoplay muted loop></video>
<video class="video-slide active" src="image/assets/mineração2.mp4" autoplay muted loop></video>
<div class="slider-navigation">
<div class="nav-btn" id="clickme1"></div>
<div class="nav-btn" id="clickme2"></div>
<div class="nav-btn" id="clickme3"></div>
<div class="nav-btn" id="clickme4"></div>
<div class="nav-btn" id="clickme5"></div>
<div class="nav-btn" id="clickme6"></div>
<div class="nav-btn" id="clickme7"></div>
</div>
</section>
SCRIPT JS
const btns = document.querySelectorAll(".nav-btn");
const slides = document.querySelectorAll(".video-slide");
var sliderNav = function(manual){
btns.forEach((btn) => {
btn.classList.remove("active");
});
slides.forEach((slide) => {
slide.classList.remove("active");
});
btns[manual].classList.add("active");
slides[manual].classList.add("active");
}
btns.forEach((btn, i) => {
btn.addEventListener("click", () => {
sliderNav(i);
});
});