Pausing / resuming a Divs Slideshow in Javascripts

Question

Pausing / resuming a Divs Slideshow in Javascripts

Navigation

#1 by (0 votes)

0

I made a slideshow of HTML divs for a personal project of mine, I saw in W3School how to do it and it works, however, there was a need to pause this slideshow with a button inside each div and then resume the slideshow from where it stopped.

I used this example to use Divs instead of Bootstrap.

I tried to implement a logic with global variables to control the slideshow, but without success.

Follow the code below:

<script>
    var pausa = false;
    function carousel() {
        var i;
        var x = document.getElementsByClassName("publica");
        for (i = 0; i < x.length; i++) {
          x[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > x.length) {slideIndex = 1}
        x[slideIndex-1].style.display = "block";
        if(pausa){
            return;
        } else{
            setTimeout(carousel, 7000); 
        }
    }
</script>
<!-- divs que vão rodar em slideshow-->
<div class="publica">
    <div class="titulo">
        <p>Texto genérico</p>
    </div>
    <hr>
    <div class="texto">
        <span>
        <p>Texto genérico</p>
    </div>              
    <hr>
    <div class="rodape">
        <button onclick="javascript:pausa=true;">Pausar</button>
        <button>Retomar</button>
    </div>
</div>
<div class="publica">
    <div class="titulo">
        <p>Texto genérico</p>
    </div>
    <hr>
    <div class="texto">
        <span>
        <p>Texto genérico</p>
    </div>              
    <hr>
    <div class="rodape">
        <button onclick="javascript:pausa=true;">Pausar</button>
        <button>Retomar</button>
    </div>
</div>
<div class="publica">
    <div class="titulo">
        <p>Texto genérico</p>
    </div>
    <hr>
    <div class="texto">
        <span>
        <p>Texto genérico</p>
    </div>              
    <hr>
    <div class="rodape">
        <button onclick="javascript:pausa=true;">Pausar</button>
        <button>Retomar</button>
    </div>
</div>
 <!-- script para iniciar a função de slideshow -->
<script>
    var slideIndex = 0;
    carousel();
</script>

Thanks to anyone who can help.

javascript html slideshow

asked by anonymous 24.07.2016 / 23:05

1 answer

Redirect VPN or DNS to Proxy "TextWriter sw" Formatting

score 0 · Accepted Answer

I was able to solve using a flag out of the function and changing from setTimeout () to setInterval (), follow code to help anyone who has this doubt one day:

<script>
    var isPaused = false;
    function carousel() {
        if(isPaused){
            return; 
        }
        var i;
        var x = document.getElementsByClassName("publica");
        for (i = 0; i < x.length; i++) {
          x[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > x.length) {
            slideIndex = 1;
        }
        x[slideIndex-1].style.display = "block";
    }
    function pararSlide(element){
        console.log(isPaused);
        if(isPaused){
            isPaused = false;
            element.innerText="Pausar";
        } else{
            element.innerText="Continuar";
            isPaused = true;
        }
    }
</script>
<!-- DIV'S COM OS CONTEUDOS QUE ROTACIONARÃO, IGUAL O DE CIMA-->
<script>
    var slideIndex = 0;
    carousel();
    setInterval(carousel, 7000);
</script>