在twitter上的最後一張幻燈片上停止輪播bootstap v2.3.0

Question

所以我一直在四處搜索，似乎無法得到明確的答案。我有5張圖片，我希望它在最後一張幻燈片結束時停下來。有人可以幫幫我嗎。

下面是代碼：

<!-- begin: carousel --> 
     <section id="carousel"> 
       <div id="myCarousel" class="carousel slide"> 
       <div class="carousel-inner"> 
        <div class="item active"> 
        <img src="img/slider/fake1.jpg" alt=""> 
        <div class="carousel-caption"> 
         <h4>First Thumbnail label</h4> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
        </div> 
        </div> 
        <div class="item"> 
        <img src="img/slider/fake2.jpg" alt=""> 
        <div class="carousel-caption"> 
         <h4>Second Thumbnail label</h4> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
        </div> 
        </div> 
        <div class="item"> 
        <img src="img/slider/fake3.jpg" alt=""> 
        <div class="carousel-caption"> 
         <h4>Third Thumbnail label</h4> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
        </div> 
        </div> 
        <div class="item"> 
        <img src="img/slider/fake4.jpg" alt=""> 
        <div class="carousel-caption"> 
         <h4>Third Thumbnail label</h4> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
        </div> 
        </div> 
        <div class="item"> 
        <img src="img/slider/fake5.jpg" alt=""> 
        <div class="carousel-caption"> 
         <h4>Third Thumbnail label</h4> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
        </div> 
        </div> 
       </div> 
       </div> 
     </section> 
     <!-- end: carousel --> 

，這裏是我的JS

<script> 
    !function ($) { 
    $(function(){ 
     // carousel demo 
     $('#myCarousel').carousel(
     { 
      interval: 3000, 
      pause: 'hover' 
     } 
    ) 
    }) 
    }(window.jQuery) 
</script> 

在此先感謝..

我嘗試添加cycle: true和clycle: 'true'但它仍然推移和第三張幻燈片會增加兩倍（對於第4張和第5張幻燈片來說顯然是這樣），那麼它會回到1.

Answer 1

獲取關於旋轉木馬的「滑」事件鉤（滑動後火災），當最後一張幻燈片是主動暫停旋轉木馬，如：

$('#myCarousel').bind('slid', function(e) { 
    var c = e.target; 
    if($(c).find('.item:last').hasClass('active')) { 
     $('#myCarousel').carousel('pause'); 
    } 
}); 

這裏有一個fiddle