Pause/resume a Divs Slideshow in Javascripts

Question

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

I used this example by using Divs instead of Bootstrap.

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

Follows code:

<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>

I thank anyone who can help.

Answer 1

I managed to solve using a flag outside the function and changing from setTimeout() to setInterval(), follow code to help those who also have this question 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>