Looking for help with Bootstrap Carousel Disable Auto Cycle? Here’s a quick way to help fix your issue.
I’ve been using the built-in carousel that comes packaged with Twitter Bootstrap for a recent project build. The client has requested that we disable auto cycle from the bootstrap carousel.
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.
How to Disable Auto Cycle in Twitter Bootstrap Carousel
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 element 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. Hopefully, it’s a helpful snip if your client is set on the bootstrap carousel disable auto cycle.
Kind notes from a few people who have successfully used this method to disable the auto cycle in their bootstrap carousel:
This solved my problem, thank you so much.
Lauren – front end developer and bootstrap enthusiast
Excellent. Works. Thank you!
Raul – aspiring developer