go to the next div by deleting another element

Question

go to the next div by deleting another element

Navigation

#1 by (0 votes)

0

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 in the loop. How do I?

The goal is to create a slide in which, when you get to the last div, retune the loop to the first div. The way I'm doing below is 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)

javascript jquery

asked by anonymous 04.05.2018 / 14:08

1 answer

Help icon / view positioning under image How to create a field in the FullClick EventClick coordinates

score 0 · Answer 1

I added data-slide to <div> s to do 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 Jquery , as I already put in the comment, you can define the animation according to your project, for <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>