bootstrap carousel disable auto cycle

Posted by on Jul 17, 2013 in quick code bites | 3 Comments

I’ve been using the built in carousel that comes packaged with Twitter Bootsrap for a recent project build. The client has requested that we disable auto cycle from the¬†bootstrap carouselTwitter . Not a big deal but I haven’t worked with all the interval settings and plugin parameters so I had to do a little digging after my initial thought of {interval: false} didn’t work as expected. It seems that the default function set in the js rules that when the “mouseleave” event fires, the cycling resumes, even if it was turned off in the parameters.

Simple fix though, you can set interval: false in the js options and cover your bases by adding it again straight into the .carousel div that contains the carousel. Just open the carousel like so:
div id="myCarousel" class="carousel slide" data-interval="false"
and you’ll be covered.

Nothing too crazy here but hopefully a helpful snip if you’re client is set on the bootstrap carousel disable auto cycle.

  • Lauren

    This solved my problem, thank you so much.

  • Raul

    Excellent. Works. Thank you

  • bob is here

    thanks that’s an elegant solution