Bootstrap 限制轮播指标，但仍可循环答案

【问题标题】：Bootstrap limit carousel indicators but can still cycleBootstrap 限制轮播指标，但仍可循环
【发布时间】：2014-08-26 06:43:40
【问题描述】：

我想将轮播指示器限制为两 (2) 个，但正如您在下面的代码中所见，我要滑动四 (4) 个图像。当我滑动到第三张图像时，轮播指示器不循环，显然是因为只有两个指示器。如果是这种情况，我该如何循环轮播指示器？

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

【问题讨论】：

你找到答案了吗？

标签： jquery twitter-bootstrap

【解决方案1】：

一种方法是

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

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

【讨论】：

如果我有 5 张幻灯片和 2 个指标的情况（仅作为示例），则不起作用。当我滑动到第 5 个图像（索引 4）时，使用您的代码：4%2 为 0，当我滑动到下一个图像（即第 1 个图像）时，它也在索引 0。因此，使用有序对来说明: (imageIndex,indicator) => (0,0),(1,1),(2,0),(3,1),(4,0),(0,0) ,(1,1),(2,0)... 虽然支持你的答案，但我更喜欢它继续在两个指标之间循环，如下所示：(0,0),(1,1),( 2,0),(3,1),(4,0),(0,1),(1,0),(2,1),... 等等。当我遇到像 3 个指标这样的情况时，这也应该有效。