在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