Twitter Bootstrap旋轉木馬 - 如何實現連續慢速滾動？

Question

我正在使用Twitter Bootstrap 3並獲得了8張圖像的輪播。它顯示4，然後跳到下一個4.此時，必須使用左右箭頭按鈕（或等待片刻）讓旋轉木馬改變。我該如何做到這一點，所以有一個連續的，慢滾動旋轉木馬的項目？我不希望它從一組4跳到另一組，我想要連續滾動。

Answer 1

您需要做的第一件事是將以下代碼複製並粘貼到HTML文件中。鼓勵您將輪播示例通用ID更改爲更獨特的內容。如果你這樣做，確保在整個標記中正確引用它。我們還使用了佔位符圖像，您需要用您想要的滑塊圖像進行替換。

http://jsfiddle.net/2qWy8/21/

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="4"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="5"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="6"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="http://placehold.it/1200x315" alt="..."> 
     <div class="carousel-caption"> 
      <h3>Caption Text</h3> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/1200x315" alt="..."> 
     <div class="carousel-caption"> 
      <h3>Caption Text</h3> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/1200x315" alt="..."> 
     <div class="carousel-caption"> 
      <h3>Caption Text</h3> 
     </div> 
    </div> 
     <div class="item"> 
     <img src="http://placehold.it/1200x315" alt="..."> 
     <div class="carousel-caption"> 
      <h3>Caption Text</h3> 
     </div> 
    </div> 
       <div class="item"> 
     <img src="http://placehold.it/1200x315" alt="..."> 
     <div class="carousel-caption"> 
      <h3>Caption Text</h3> 
     </div> 
    </div> 
        <div class="item"> 
     <img src="http://placehold.it/1200x315" alt="..."> 
     <div class="carousel-caption"> 
      <h3>Caption Text</h3> 
     </div> 
    </div> 
         <div class="item"> 
     <img src="http://placehold.it/1200x315" alt="..."> 
     <div class="carousel-caption"> 
      <h3>Caption Text</h3> 
     </div> 
    </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
</div> <!-- Carousel --> 

還有與JS的解決方案，但告訴我，我將修改我的答案，這是你需要什麼？

UPDATE 然後用另一小，沒有這一條

下面是引用插件

http://www.codicode.com/demo/endless_scroll/ \

使用這樣

$(window).load(function() { 
    $("#divID").endlessScroll({ width: '100%', height: '100px', steps: -2, speed: 40, mousestop: true }); 
});