Bootstrap JavaScript Carousel Doesn't Stop Cycling

Question

Twitter Bootstrap Version: 2.0.3

Example HTML code:

Answer 1

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

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

Answer 2

$('your-carousel').carousel({
pause: true,
interval: false
});

Answer 3

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
        });
    });
});​

Answer 4

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.

Answer 5

I have some problem too doing Stop bootstrap Carousel from auto playing. I checked bootstrap.js file and I have found codes related to carousel then I remove the another js. In new js file I make copy from all codes and then I change Carousel variable to Carousel_n(because it's possible to change it to anything you want). In last line of codes, the most important thing to do is:

 {  $('[data-ride="carousel"]').each(function () }

I change carousel to carousel_n.

for html I only changed:

<div id="Carousel" class="carousel slide" data-ride="carousel">

to

<div id="Carousel" class="carousel slide" data-ride="carousel_n">

and ofcourse it really worked.

Answer 6

Apart from what @dgabriel suggests, do make sure that the JavaScript call that initializes Bootstrap carousel is AFTER the <script> references to jQuery, bootstrap-transition.js, and bootstrap-carousel.js, pretty much like this:

<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.gallery-carousel').each(function(){
        $(this).carousel({
            interval: false
        });
    });
});
</script>

This makes sure that the carousel works as intended (errors like Uncaught ReferenceError: $ is not defined (anonymous function) for example.