使用bootstrap导航多个传送带物品3

Question

如何使传送带物品与引导程序3一起导航为一组？我们怎样才能让多个项目在点击时移动，而不是一次移动一个项目。对于例如如果我看到幻灯片1,2,3，则下一个轮播控件应显示幻灯片4,5,6。

<div id="myCarousel" class="carousel slide"> 

    <div class="carousel-inner"> 
    <div class="item active"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture1.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture2.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture3.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture4.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture5.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture2.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture4.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture3.png" class="img-responsive"></a></div> 
    </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 

<script> 
$('.carousel .item').each(function(){ 
    var next = $(this).next(); 
    if (!next.length) { 
    next = $(this).siblings(':first'); 
    } 
    next.children(':first-child').clone().appendTo($(this)); 

    for (var i=0;i<2;i++) { 
    next = next.next(); 
    if (next.length>0) { 
    next.children(':first-child').clone().appendTo($(this)); 
    } 
    else { 
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
    } } 
}); 
</script> 

Answer 1

有没有必要额外的JS。只需使用标准引导旋转木马......

<div class="carousel-inner"> 
     <div class="item active"> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
     </div> 
    </div> 

http://www.codeply.com/go/Vnvl4HqgKJ