Twitter Bootstrap Carousel Slide not working

Question

I am trying to implement a Twitter bootstrap carousel. It looks and works automatically, but the slide effect between the elements does not work. It just statically replaces one element with the next. Although it is functional, it is a less pleasant UX. Thoughts?

<div class="span7"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="img/CoachellaValley.png" alt=""> <div class="carousel-caption"> <h4>Sponsor 1</h4> </div> </div> <div class="item"> <img src="img/CoachellaValley2.png" alt=""> <div class="carousel-caption"> <h4>Sponsor 2</h4> </div> </div> <div class="item"> <img src="img/CoachellaValley3.png" alt=""> <div class="carousel-caption"> <h4>Sponsor 3</h4> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> </div> [...] <script src="js/bootstrap.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/bootstrap-collapse.js"></script> <script src="js/bootstrap-carousel.js"></script> <script type="text/javascript"> $(function(){ $('#myCarousel').carousel(); }) </script> 

Answer 1

Try the following:

Remove all of the following js scripts that you uploaded to your document:

 <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-collapse.js"></script> <script src="js/bootstrap-carousel.js"></script> 

And just keep the following in the same order (jQuery comes first)

 <script src="js/jquery-1.7.2.min.js"></script> <script src="js/bootstrap.js"></script> 

The problem is that, in addition to downloading the same script files several times (the bootstrap js file contains all the plug-ins, so you do not need to include the minimum version (save it for production at the moment) or separate separate script files), you are not loading the script transition included in the bootstrap.js file, due to the loading order of your scripts.

Answer 2

After I struggled with this for a while, I found a solution, you just need to enable

bootstrap-transition.js

and the slide animation will work.

Answer 3

Deal if I use class="carousel" for a carousel container and

 $('.carousel').carousel('slide',{interval:1000}); 

it only works for one left / right click and works very well (but only at a time).

If using class="carousel slide" and

 $('.carousel .slide').carousel('slide',{interval:1000}); 

then switch the carousel, but without the effect of the slide animation.

Answer 4

Your code is correct. On my system, this code works fine.

Bootstrap does not have a definition for the slide class. But without the Slide class, carousel images will change without any animation effect.

Add a script to your code

 <script> $(document).ready(function () { $('.carousel').carousel(); }); </script> 

Check out the Bootstrap CSS and JS code in the code. and also check the order of the help files

You can follow this order: -

• bootstrap.css
• bootstrap-theme.css
• Jquery-1.9.1.js
• bootstrap.js

The script block will not work with the JQ library. 2. Add the JQ library file correctly.

And make sure the JQ file is loaded before the script runs. To do this, you can add a link at the top of the page.

Answer 5

Despite the fact that this question was answered successfully, I came here to find an answer to a similar problem.

My first item in the carousel slid to the left, as usual, but the second item did not stand behind it. After the first item has exited the screen, the second item will appear, not slide in. Then it will disappear and the first element will slide correctly.

If you have this problem, make sure that you have no position: relative; on the .item div.

I added that like this:

 .carousel-inner > .item { position:relative; height:495px; } 

It turns out that everything is in order. Take-off: relative; fixed problem. Now the slide is smooth and correct.