Buttons when they arrive at the first and last sliders show blank

Question

I have the following slide below:

      $(document).ready(function(e) {

         const blocos = $("div.slider div.slide div");
      
         function startslider() {  
         
            ativa = $(".ativa")
         
            if (!$(ativa).next("div.slide").length) {
               // remove a classe do último
               $(ativa)
               .removeClass("ativa")
         
               // adiciona a classe no primeiro
               $("div.slider div.slide")
               .first()
               .addClass("ativa")
            }else{
               $(ativa)
               .removeClass("ativa")
               .next()
               .addClass("ativa")
            }
         
            setTimeout(startslider, 5000)
         }
         
         setTimeout(startslider, 5000)
         
          $("div.slider nav button.anterior").click(function(){
          
            prev = $(".ativa").prev();  
            prev = prev.length ? prev : blocos[ blocos.length - 1 ];  
            mostraBloco(prev);
            
          })
          
          $("div.slider nav button.proximo").click(function(){
              
            next = $(".ativa").next();   
            next = next.length ? next : blocos.first();    
            mostraBloco(next);
            
          })
          
          /* Função para exibir as imagens */
          function mostraBloco(next) {
              
            ativa = $(".ativa")
            
            $(ativa).removeClass("ativa")
            $(next).addClass("ativa")
            
          }
      
      })

      * {
          margin: 0;
          padding: 0;
          border: none;
          outline: 0;
      }
      body {
          width: 100vw;
      }
      ul {
          list-style: none;
      }
      .fade {
          -webkit-animation-name: fade;
          -webkit-animation-duration: 1.5s;
          animation-name: fade;
          animation-duration: 1.5s;
      }
       @-webkit-keyframes fade {
       from {
       opacity: .4
      }
       to {
       opacity: 1
      }
      }
       @keyframes fade {
       from {
       opacity: .4
      }
       to {
       opacity: 1
      }
      }
      @keyframes slider {
       0% {
       transform: scale(1);
      }
       100% {
       transform: scale(1.1);
      }
      }
      div.slider {
          position: relative;
          width: 100%;
          overflow: hidden;
      }
      div.slider div.slide {
      }
      div.slider div.slide {
          display: none;
      }
      .ativa {
          display: block !important;
          animation: fade 1s linear;
      }
      div.slider div.slide img {
          position: relative;
          width: 100%;
          animation: slider 1s linear;
          animation-fill-mode: forwards;
      }
      div.slider div.slide span {
          position: absolute;
          width: 100px;
          left: calc(50% - 50px);
          line-height: 40px;
          bottom: 0;
          text-align: center;
          color: rgb(255,255,255);
          z-index: 2;
      }
      div.slider nav {
          position: absolute;
          width: 100%;
          height: 40px;
          bottom: 0;
          background-color: rgba(0,0,0,.5);
          z-index: 1;
      }
      div.slider nav button {
          position: absolute;
          width: 150px;
          height: 100%;
          cursor: pointer;
      }
      div.slider nav button.anterior {
          left: 10%;
      }
      div.slider nav button.proximo {
          right: 10%;
      }

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slider">
    
     <div class="slide ativa">
       <img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg" />
       <span>Este é 1</span>
     </div>
     
     <div class="slide">
       <img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg" />
       <span>Este é 2</span>
     </div>
    
     
     <div class="slide">
       <img src="http://funerariasaopedro.net.br/novo/_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’m having a problem here with the buttons:

Buttons when they reach the first and last sliders blank show. But the automatic keeps running, that is, the startslider() function works well.

How to fix this?

I’ve exhausted my possibilities and I need help!

Answer 1

The problem was this: lack of attention after suffering a lot. kkkkkkk

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

the correct is

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

After all, you never find the next element of a group of one is not even?