23

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.

2
  • 2
    Basically, my carousel doesn't slide. It just switches image. So the carousel "is" working, just not with the slide effect? May 18, 2012 at 23:20
  • 8
    Just to clarify, the carousel is working, but the slide effect is not there. I just figured out that you need to also include bootstrap-transition.js for any animation and make sure you add a class called "slide" on the div that is used as container for the carousel. I can't answer my own question until 8 hours later, but this is the answer to the question.
    – juminoz
    May 18, 2012 at 23:40

6 Answers 6

44

You also have to add bootstrap-transition for the sliding to work, like so:

<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
2
  • 3
    This is only true when using the non-minified version of bootstrap.js. The minified one includes the transition code. Feb 26, 2014 at 21:40
  • The above hint by @MichaelTeper is my winner, solved my problem. Upvoted. Deserves to be a stand-alone answer. Thanks Michael.
    – user776686
    Jan 29, 2015 at 9:55
24

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();
2
  • If you're using bootstrap 1.x - try using bootstrap 2.x - it fixed it for me
    – niico
    Oct 10, 2013 at 7:17
  • Adding the slide class worked for me in bootstrap 3 as well.
    – neno
    Feb 17, 2017 at 13:32
1

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?

0
0

Here is a working example. It's probably something minor your missing. http://jsfiddle.net/chapmanc/Vza6F/1/

0

Do you just put that JavaScript in a <script> tag?

<script>
    $('.carousel').carousel({
        interval: 1000
    })​;
</script>
-2

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 .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.