CODEWITHSUNDEEP
jquerytwitter-bootstrap
Perroquiet
Perroquiet

Reputation: 177

Bootstrap limit carousel indicators but can still cycle

I wanted to limit the carousel indicators to two (2) but as you can see in the code below, I have four (4) images to slide. When I slide to the 3rd image the carousel indicator does not cycle, obviously because there are only two indicators. How do I cycle the carousel indicators if this is the case?

 <div id="myCarousel" class="carousel slide">
   <!-- Carousel indicators -->
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
   </ol>   
   <!-- Carousel items -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="/bootstrap/images/slide1.png" alt="First slide">
      </div>
      <div class="item">
         <img src="/bootstrap/images/slide2.png" alt="Second slide">
      </div>
      <div class="item">
         <img src="/bootstrap/images/slide3.png" alt="Third slide">
      </div>
      <div class="item">
         <img src="/bootstrap/images/slide4.png" alt="Third slide">
      </div>
   </div>
   <!-- Carousel nav -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">&rsaquo;</a>
</div>

Upvotes: 0

Views: 2339

Answers (1)

BENARD Patrick
BENARD Patrick

Reputation: 31005

One way is

The doc : http://getbootstrap.com/javascript/#carousel-usage

The bootply : http://www.bootply.com/9UP4lv26ih

The Js :

$('#myCarousel').on('slid.bs.carousel', function(e){
  $index = $('div.item.active').index()%2;  
  $carouselIndic = $('[data-slide-to="'+$index+'"]');
  $('.carousel-indicators li').removeClass('active');
    $carouselIndic.addClass('active');  
});

Upvotes: 2

Related Questions