Twitter Bootstrap Carousel Not Sliding
I ran into an interesting issue. I’m pretty sure that the answer is very simple, but I just couldn’t figure it out so I thought I look for some help.
Basically, my carousel doesn’t slide. It just switches image. I even tried copying the exact HTML from the bootstrap site into my own page and it still doesn’t slide. In application.js, the initialization is also has no argument.
// carousel demo
$('#myCarousel').carousel()
I notice that next and prev classes are added to each item when clicking pref/next button, but it doesn’t seem to do the same thing on mine. I didn’t see anything wrong when I debugged either.
What am I missing? I tested this in both latest Chrome and Safari.
You also have to add bootstrap-transition for the sliding to work, like so:
<script src="https://stackoverflow.com/questions/10660718/twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
I was having the same issue but with bootstrap v2.0.3 (which has transition bundled in), ended up adding the slide class to the carousel div
<div id="myCarousel" class="carousel slide">
then you just call:
$('#myCarousel').carousel();
I think you need
$('#myCarousel').carousel('cycle');
Pls also see:
How can I make the Bootstrap js carousel automatically cycle as soon as the page loads?
Here is a working example. It’s probably something minor your missing.
http://jsfiddle.net/chapmanc/Vza6F/1/
Do you just put that JavaScript in a <script> tag?
<script>
$('.carousel').carousel({
interval: 1000
});
</script>
check the css files that you have included. Try and add the bootstrap.css file as well in addition to bootstrap.min.css. It worked for me .
