Repeat carousel Bootstrap

Question

Repeat carousel Bootstrap

Navigation

#1 by (0 votes)

1

I have this code from a carousel

$('#carousel-example-generic').on('slide.bs.carousel', function() {
  var interval = $('div.item.active').attr('duration');
  setTimeout(function() {
    $('.carousel').carousel('next');
  }, interval);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active" duration="3000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        First
      </div>
    </div>
    <div class="item" duration="2000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        Second
      </div>
    </div>
    <div class="item" duration="1000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        Third
      </div>
    </div>
    <div class="item" duration="500">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        Fourth
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

How do I repeat this code and have multiple carousel on the same page?

I'm doing this, but it's not right

$('#carousel-example-generic').on('slide.bs.carousel', function() {
var interval = $('div.item.active').attr('duration');
setTimeout(function() {
$('.carousel').carousel('next');
}, interval);
});


$('#carousel-example-generic2').on('slide.bs.carousel', function() {
var interval = $('div.item.active').attr('duration');
setTimeout(function() {
$('.carousel2').carousel('next');
}, interval);
});

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators 
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>-->

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active" duration="4000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        First
      </div>
    </div>
    <div class="item" duration="8000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        Second
      </div>
    </div>
    <div class="item" duration="4000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        Third
      </div>
    </div>
    <div class="item" duration="8000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        Fourth
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

















<div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
  <!-- Indicators 
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>-->

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active" duration="8000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        First
      </div>
    </div>
    <div class="item" duration="4000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        Second
      </div>
    </div>
    <div class="item" duration="8000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        Third
      </div>
    </div>
    <div class="item" duration="4000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        Fourth
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

twitter-bootstrap

asked by anonymous 27.04.2018 / 19:32

1 answer

Why is the statement not being executed? Sending the data of a form by two pages

score 0 · Answer 1

You want to pass each slide item at different times, taking the duration attribute of each.

The first thing is that you are using the wrong event: use slid.bs.carousel instead of slide.bs.carousel . The slid.bs.carousel is triggered after each slide so you can correctly pick up the attribute value of the current item.

You are also calling the next method with the wrong selector; Instead of the .carousel class, use the id of the slider ( #carousel-example-generic and #carousel-example-generic2 ).

Also remove the data-ride="carousel" attribute for the carousel to start stopped.

See the code corrected and working:

$(document).ready(function(){
   $('#carousel-example-generic').on('slid.bs.carousel', function(){
      var interval = $('div.item.active', this).attr('duration');
      var $this = $(this);
      setTimeout(function(){
         $this.carousel('next');
      }, interval);
   });
   
   $('#carousel-example-generic2').on('slid.bs.carousel', function(){
      var interval = $('div.item.active', this).attr('duration');
      var $this = $(this);
      setTimeout(function(){
         $this.carousel('next');
      }, interval);
   });

   setTimeout(function(){
      $('#carousel-example-generic').carousel('next');
   }, 1000); // coloque aqui o tempo do primeiro item do primeiro slider
   
   setTimeout(function(){
      $('#carousel-example-generic2').carousel('next');
   }, 3000); // coloque aqui o tempo do primeiro item do segundo slider
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active" duration="1000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        First
      </div>
    </div>
    <div class="item" duration="5000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        Second
      </div>
    </div>
    <div class="item" duration="500">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        Third
      </div>
    </div>
    <div class="item" duration="10000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        Fourth
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<!-- segundo slider -->

<div id="carousel-example-generic2" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active" duration="3000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        First
      </div>
    </div>
    <div class="item" duration="1000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        Second
      </div>
    </div>
    <div class="item" duration="2000">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        Third
      </div>
    </div>
    <div class="item" duration="500">
      <img src="http://placehold.it/400x200"alt="..." />
      <div class="carousel-caption">
        Fourth
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Obs: by clicking on the "prev" and "next" arrows, a new setTimeout will be generated which will run over as defined above. p>