When they arrive at the first and last sliders put the slides all as . active

Asked

Viewed 31 times

2

I have the following slide below:

      $(document).ready(function(e) {
                    
        const blocos = $("div.slider div.slide div");
        
        function startslider() {  
        
          ativa = $(".ativa")
          
          if (!$(ativa).next().length) {
              ativa = blocos.first()
          }
          
           $(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 div {
          display: none;
      }
      .ativa {
          display: block !important;
          animation: fade 1s linear;
      }
      div.slider div.slide div img {
          position: relative;
          width: 100%;
          animation: slider 1s linear;
          animation-fill-mode: forwards;
      }
      div.slider div.slide div 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">
      
       <div class="ativa">
         <img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg" />
         <span>Este é 1</span>
       </div>
       
       <div>
         <img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg" />
         <span>Este é 2</span>
       </div>   
       
       <div>
         <img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_3.jpg" />
         <span>Este é 3</span>
       </div>
       
     </div>
     
     <nav>
      <button class="anterior">Anterior</button>
      <button class="proximo">Próximo</button>
     </nav>
    
    </div>

When they get to the first and last sliders put all slides as . active.

But the buttons keep turning correctly

jquery

2 answers

2


You can do it this way too:

ativa = $(".ativa")
blocos
.removeClass("ativa")

var atv = !$(ativa).next().length ? blocos.first() : ativa.next()
atv
.addClass("ativa")

Working:

$(document).ready(function(e) {
                    
  const blocos = $("div.slider div.slide div");
  
  function startslider() {  
  
      ativa = $(".ativa")
      blocos
      .removeClass("ativa")
      
      var atv = !$(ativa).next().length ? blocos.first() : ativa.next()
      atv
      .addClass("ativa")
    
    
     setTimeout(startslider, 3000)
  }
  
  setTimeout(startslider, 3000)
  
  $("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 div {
          display: none;
      }
      .ativa {
          display: block !important;
          animation: fade 1s linear;
      }
      div.slider div.slide div img {
          position: relative;
          width: 100%;
          animation: slider 1s linear;
          animation-fill-mode: forwards;
      }
      div.slider div.slide div 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">
      
       <div class="ativa">
         <img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg" />
         <span>Este é 1</span>
       </div>
       
       <div>
         <img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg" />
         <span>Este é 2</span>
       </div>   
       
       <div>
         <img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_3.jpg" />
         <span>Este é 3</span>
       </div>
       
     </div>
     
     <nav>
      <button class="anterior">Anterior</button>
      <button class="proximo">Próximo</button>
     </nav>
    
    </div>

  • That’s right, thank you! I have this similar problem, if you can give me more strength! https://answall.com/questions/297461/bot%C3%B5es-quando-chegam-no-primeiro-e-ultimo-sliders-mostrar-em-branco

  • I’ll take a look

1

In your startSlider function, when you no longer have an image to display you return to the first element of the block. However you are assigning the active class to that first block and doing all the class assignment and removal on the first element and forgetting that there is an element with the "active" class, which in this case is the last item.

      if (!$(ativa).next().length) {
        $(ativa).removeClass("ativa")

        ativa = blocos.first()
        $(ativa).addClass("ativa")
      }
      else
      {
          $(ativa).removeClass("ativa").next().addClass("ativa")
      }

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.