Twitter Bootstrap Carousel Slide Doesn't Work

Question

I'm trying to implement Twitter Bootstrap Carousel plug in. It looks and auto cycles correctly, but the slide effect between items does not work. It simply statically replaces one item with the next. While it's functional, this is a less than pleasing 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>

Solution 1

Try this:

Remove all the following js scripts you have loaded in 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 that same order (jQuery goes first)

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

The problem i believe is that, aside from loading the same script files multiple times (the bootstrap js file has all the plugins included already so no need to include the min version (save it for production for now) or the single separate script files), you're not loading the transition script included inside the bootstrap.js file because of the order that your scripts are loading in.

Solution 2

After struggling with this for a while I have found a solution - you just need to include

bootstrap-transition.js

and the slide animation will work.

Solution 3

Deal is if I am using class="carousel" for carousel container and

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

it works only for one left\right click and works pretty much fine (but only for one time).

If use class="carousel slide" and

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

then carousel switching but without slide animation effect.

Solution 4

Your Code is Correct.. In my system this code working fine..

There is no definition for class "slide" in Bootstrap 3..But without "Slide" class ,carousel images will change with out any animation effect..

Add this script in you code

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

Check the Bootstrap CSS & JS Reference in you code.. and also check the order of the Reference files

You can follow this order:-

1. bootstrap.css
2. bootstrap-theme.css
3. jquery-1.9.1.js
4. bootstrap.js

The script block will not work with out JQ Library..So add JQ Library file correctly ..

And Ensure that the JQ file loaded before the script working..For that you can add the reference at the top of your page

View more solutions

Comments

[Steve Perks]

$('.carousel .slide') isn't the same as $('.carousel.slide') (without a space). The later would work whereas the former would be targeting class=slide only if it's a child of class=carousel

[trejder]

Andres Ilich's answer above suggests, that bootstrap-transition.js code is in fact already included in main bootstrap.js. If that's true, your answer would become incorrect -- no need to extra loading of bootstrap-transition.js file.

[Michael]

This was the answer, I somehow was commented out this in bootstrap.js. :D