go to the next div excluding another element

Question

I have the following HTML structure:

<div class="slider">
  <div class="slide fade ativa"> <img  src="_img/_banner/_site/bg_1.jpg" /> <span>Este é 1</span> </div>
  <div class="slide fade"> <img  src="_img/_banner/_site/bg_2.jpg" /> <span>Este é 2</span> </div>
  <div class="slide fade"> <img  src="_img/_banner/_site/bg_3.jpg" /> <span>Este é 3</span> </div>
  <nav>
  <button class="anterior">Anterior</button>
  <button class="proximo">Próximo</button>
  </nav>
</div>

I need to run inside the div.slider, all, and only, Divs.slide excluding the Buttons from the loop. How do I do?

The goal is to create a slide in which, when you arrive at the last div, resume the loop to the first div. The way I’m going down, it’s not working.

const blocos = $("div.slider div.slide");

function startslider() {  

  ativa = $("div.slider div.ativa")

  if (!$(ativa).next().length) {
    ativa = blocos.first()
  }

   $(ativa)
      .removeClass("ativa")
      .next()
      .addClass("ativa")

   setTimeout(startslider, 5000)
}

setTimeout(startslider, 5000)

Answer 1

I added the data-slide in <div>s to make the interaction

<div class="slider">
    <div class="slide fade ativa" data-slide="1"> <img  src="_img/_banner/_site/bg_1.jpg" /> <span>Este é 1</span> </div>
    <div class="slide fade" data-slide="2"> <img  src="_img/_banner/_site/bg_2.jpg" /> <span>Este é 2</span> </div>
    <div class="slide fade" data-slide="3"> <img  src="_img/_banner/_site/bg_3.jpg" /> <span>Este é 3</span> </div>
    <nav>
        <button class="anterior">Anterior</button>
        <button class="proximo">Próximo</button>
    </nav>
</div>

Here in the Jquery,as already put in the comment, you can set the animation according to your project, for the <button class="anterior"> just do the reverse calculation

<script type="text/javascript">
    $('.proximo').click(function(){
        var slide = $('.ativa').attr('data-slide');
        var proximo = parseInt(slide)+1;
        $('[data-slide="'+slide+'"]').removeClass('ativa');
        $('[data-slide="'+slide+'"]').hide();//aqui você usa fadeIn, fadeOut, de acordo com seu projeto
        if(proximo>($('div.slide').length)){
          $('[data-slide="1"]').show();//aqui você usa fadeIn, fadeOut, de acordo com seu projeto
            $('[data-slide="1"]').addClass('ativa');
        }else{
          $('[data-slide="'+proximo+'"]').show();//aqui você usa fadeIn, fadeOut, de acordo com seu projeto
         $('[data-slide="'+proximo+'"]').addClass('ativa');
        }
    });
</script>