Question

我想将旋转木马指示器限制为两（2），但正如您在下面的代码中所看到的，我有四（4）张图像可以滑动。当我滑动到第3张图像时，旋转木马指示器不会循环，显然是因为只有两个指示器。如果是这种情况，如何循环旋转木马指示器？

 <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>

Answer 1

一种方法是

文档：http://getbootstrap.com/javascript/#carousel-usage

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

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');  
});

Bootstrap限制轮播指示器但仍可循环

1 个答案: