-2

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);
    });
});

1
  • 1
    Benvindo ao StackOverflow em português! E o que você já tentou? Commented 16/09/2022 às 6:34

1 Resposta 1

-2

A cada 10 segundos você quer chamar sliderNav(i), sendo "i" igual ao índice de um botão/vídeo. Basta você usar setInterval para chamá-la a cada 10 segundos:

let i = 0;
const interval = setInterval(() => {
  if (i < 7) {
    sliderNav(i);
    return i++;
  }
  i = 0;
  sliderNav(i);
}, 10000);

interval(); // Não se esqueça de limpar o intervalo com clearInterval(interval) se precisar chamar novamente a função ``ìnterval```.
1
  • Muito obrigado!!! Commented 24/09/2022 às 21:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .