On the site I'm working on the carousel seems to skip to the third image the first time you click on the next button when the page loads. Does anyone have any ideas as to why this is? I'm following the suggested layout from the bootstrap documentation.

On the site I'm working on the carousel seems to skip to the third image the first time you click on the next button when the page loads. Does anyone have any ideas as to why this is? I'm following the suggested layout from the bootstrap documentation.

• javascript
• twitter-bootstrap
• carousel

Share Improve this question Follow edited Apr 11, 2015 at 3:28 TheoretiCAL asked Jul 28, 2012 at 19:02 TheoretiCALTheoretiCAL 20.6k88 gold badges4444 silver badges6767 bronze badges 2

• Side note: You might want to add the bootstrap-transition.js plugin in order to use CSS3 transitions when sliding. The carousel plugin will utilize it automatically. However, it is optional. – merv Commented Jul 28, 2012 at 20:34
• I am Experiencing the same issue in IE8, I checked to see that bootstrap.js contains the transition, i also tried re-instantiating the carousel on page load... any other ideas? – Johann Combrink Commented May 21, 2015 at 20:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

There seems to be a problem with the initialization of the carousel.

When you click for the first time on the arrow, it initializes the carousel which triggers the first switch AND select the next slide because you clicked on the arrow (all at the same time).

A direct fix would be to add this code to initialize the carousel on loading (which also enable the automatic sliding) :

$(function() {
    $('#myCarousel').carousel();
});

Be sure to include this after the plugin and everything should be okay.

Update

It also appears to be jumping to the 3rd only without the transition effect.

As suggested by merv you could include the bootstrap-transition.js file and it will resolve your problem.

Anyway, I submitted a ticket, for those who wants some follow-up : Issue on github