Twitter Bootstrap Carousel Not Sliding

Question

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.

`Basically, my carousel doesn't slide. It just switches image.` So the carousel "is" working, just not with the slide effect? — Andres I Perez, May 18 '12 at 23:20
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 '12 at 23:40

score 44 · Accepted Answer · edited Feb 21 '13 at 14:57

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>

edited Feb 21 '13 at 14:57

Community

1
1

answered Jul 14 '12 at 14:01

gabber12

1,114
2
11
18

3

This is only true when using the non-minified version of bootstrap.js. The minified one includes the transition code. – Michael Teper Feb 26 '14 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 '15 at 09:55

score 24 · Answer 2 · answered May 29 '12 at 22:36

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();

answered May 29 '12 at 22:36

Elliot Williams

563
5
11

If you're using bootstrap 1.x - try using bootstrap 2.x - it fixed it for me – niico Oct 10 '13 at 07:17
Adding the `slide` class worked for me in bootstrap 3 as well. – neno Feb 17 '17 at 13:32

score 1 · Answer 3 · edited May 23 '17 at 11:54

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?

edited May 23 '17 at 11:54

Community

1
1

answered Jul 04 '13 at 06:03

R Claven

1,160
2
13
27

score 0 · Answer 4 · answered May 18 '12 at 23:42

0

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

answered May 18 '12 at 23:42

Cameron Chapman

796
9
19

score 0 · Answer 5 · edited Sep 27 '12 at 14:08

0

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

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

edited Sep 27 '12 at 14:08

Mihai Iorga

39,330
16
106
107

answered Aug 30 '12 at 06:56

Dan

9
1

score -2 · Answer 6 · answered Jun 06 '14 at 05:38

-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 .

answered Jun 06 '14 at 05:38

Deepinder

1
1

Twitter Bootstrap Carousel Not Sliding

6 Answers6

Linked