Bootstrap Carousel多列幻燈片1一次

Question

目標：在bootstrap carousel中有多個columns (6)，一次滑動一列，並在circle中循環。

HTML：

<div class="col-md-12 text-center"> 
    <h3>Bootstrap 3 Multiple Slide Carousel</h3> 

</div> 
<div class="col-md-6 col-md-offset-3"> 
    <div class="carousel slide" id="myCarousel"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <div class="col-xs-2"> 
        <a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a> 

       </div> 
      </div> 
      <div class="item"> 
       <div class="col-xs-2"> 
        <a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a> 

       </div> 
      </div> 
      <div class="item"> 
       <div class="col-xs-2"> 
        <a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a> 

       </div> 
      </div> 
      <div class="item"> 
       <div class="col-xs-2"> 
        <a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a> 

       </div> 
      </div> 
      <div class="item"> 
       <div class="col-xs-2"> 
        <a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a> 

       </div> 
      </div> 
      <div class="item"> 
       <div class="col-xs-2"> 
        <a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a> 

       </div> 
      </div> 
      <div class="item"> 
       <div class="col-xs-2"> 
        <a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a> 

       </div> 
      </div> 
      <div class="item"> 
       <div class="col-xs-2"> 
        <a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=8" class="img-responsive"></a> 

       </div> 
      </div> 
     </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> 

    </div> 
</div> 

JS：

$('#myCarousel').carousel({ 
    interval: 4000 
}); 

$('.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 < 4; i++) { 
     next = next.next(); 
     if (!next.length) { 
      next = $(this).siblings(':first'); 
     } 

     next.children(':first-child').clone().appendTo($(this)); 
    } 
}); 

CSS：

.carousel-inner .active.left { 
    left: -16.6%; 
} 

.carousel-inner .next { 
    left: 16.6%; 
} 

.carousel-control.left, .carousel-control.right { 
    background-image: none; 
} 

我把它建立在這個JSFIDDLE（從這個bootply公然副本 - ！這不工作）

與我的問題是，它在滾動一旦所有6列，不過下一次循環，它是在一開始就正確的幻燈片。

我看不到我在做什麼不同的，並且它一直盯着的年齡。

任何意見歡迎.....請！

Answer 1

我解決了這個問題。如果沒有KAD的回答，我不會得到它，但更改版本號對我來說不是一個真正的選擇。

我使用的文件較少，並且在通過bower中引入了bootstrap，並將所有單獨的組件引入其不同的文件，然後使用@import將它們添加到一個「bootstrap.less」文件中。

我找到了carousel.less文件，發現.carousel，內部類和複製了整個塊伸到我自己.LESS文件，這樣我就可以覆蓋組件。

所以這是我的新修改的類，其中百分數說16.6％，他們以前100％都是。

.carousel-inner { 
    position: relative; 
    overflow: hidden; 
    width: 100%; 

    > .item { 
     display: none; 
     position: relative; 
     .transition(.6s ease-in-out left); 

     // Account for jankitude on images 
     > img, 
     > a > img { 
     &:extend(.img-responsive); 
     line-height: 1; 
     } 

     // WebKit CSS3 transforms for supported devices 
     @media all and (transform-3d), (-webkit-transform-3d) { 
      .transition-transform(~'0.6s ease-in-out'); 
      .backface-visibility(~'hidden'); 
      .perspective(1000px); 

      &.next, 
      &.active.right { 
      .translate3d(16.6%, 0, 0); 
      left: 0; 
      } 
      &.prev, 
      &.active.left { 
      .translate3d(-16.6%, 0, 0); 
      left: 0; 
      } 
      &.next.left, 
      &.prev.right, 
      &.active { 
      .translate3d(0, 0, 0); 
      left: 0; 
      } 
     } 
    } 

    .active, 
    .next, 
    .prev { 
     display: block; 

    } 
    .active { 
     left: 0; 
    } 

    .next, 
    .prev { 
     position: absolute; 
     top: 0; 
     width: 100%; 
    } 

    .next { 
     left: 16.6%; 
    } 
    .prev { 
     left: -16.6%; 
    } 
    .next.left, 
    .prev.right { 
     left: 0; 
    } 

    .active.left { 
     left: -16.6%; 
    } 
    .active.right { 
     left: 16.6%; 
    } 

    } 

我覺得真的是在變換的3D部分的位，一旦我改變了它的工作達到目標。

這當然將只與6列，這對我來說是正確的，現在工作了轉盤。所以爲了確保這種風格只適用於這個特殊的旋轉木馬，我把整個東西都包裹在滑塊的id中，所以它只會影響到這個。

希望這對其他人也有幫助。

Answer 2

看起來在引導程序CSS版本之間處理carousal的方式有所不同，您使用bootstrap v3.3.5，而bootply上的示例具有引導程序v3.0.2。

我真的無法提上兩個文件之間準確的區別我的手，但這裏的工作fiddle。