Bootstrap Javascript Carousel Doesn't Stop Cycling

Twitter Bootstrap Version: 2.0.3 Example HTML code:

Solution 1:

You might want to try removing the "pause" attribute. It's not necessary if you are not automatically cycling through the images. My assumption (and I'm going to look at the bootstrap code to verify) is that when the "mouseleave" event fires, the cycling resumes -- even if it was turned off in the first place. When it resumes, it uses the default speed.

Here is a solution:

$(function() {
    $('.carousel').each(function(){
        $(this).carousel({
            interval: false
        });
    });
});​

Solution 2:

To disable cycling, one working solution is to add data-interval="false" to the carousel container:

<divid="myCarousel"class="carousel slide"data-interval="false"><divclass="carousel-inner"><divclass="active item">toto</div><divclass="item">tata</div><divclass="item">tutu</div></div><aclass="carousel-control left"href="#myCarousel"data-slide="prev">&lsaquo;</a><aclass="carousel-control right"href="#myCarousel"data-slide="next">&rsaquo;</a></div>

Solution 3:

I just came up with a solution for this issue. None of the above worked for me, but it did get me to look at the bootstrap code. I believe the reason for this bug is in the bootstrap-carousel.js file in the defaults object:

$.fn.carousel.defaults= {
    interval:5000
  , pause:'hover'
  }

After the carousel slides, it ends up reverting to these default values. If you want the carousel to not slide and only be controlled by the user, you can change the defaults object to have an interval of false. Hope this helps.

  $.fn.carousel.defaults = {
    interval: false
  , pause: 'hover'
  }

Solution 4:

<div id="carousel-example-generic"class="carousel slide" data-wrap="false">

http://getbootstrap.com/javascript/#carousel

Solution 5:

I'm not sure why but the main solution didn't work for me either. Weird.

To fix my problem I did the following code.

$('.carousel').carousel({interval: false});

$(document).on('mouseleave', '.carousel', function() {

    $(this).carousel('pause');
});

See the documentation for carouselpause.

Share