Остановка карусели на последнем слайде на 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