6

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>
Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
d_meyer
  • 63
  • 1
  • 1
  • 3
  • What browser are you testing on? – Andres I Perez Apr 03 '12 at 01:25
  • Warning to readers: make sure you also add the class "slide" to the carousel div, otherwise you will experience the same symptoms (images change but are not animated). A similar problem was posted and solved (see the second comment) in this thread: http://stackoverflow.com/questions/10660718/twitter-bootstrap-carousel-not-sliding – Marco Panichi Apr 30 '16 at 14:09

5 Answers5

13

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.

Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
12

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.

swiftBoy
  • 35,607
  • 26
  • 136
  • 135
Martin Wright
  • 129
  • 1
  • 2
  • 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. – trejder Sep 25 '13 at 13:09
  • This was the answer, I somehow was commented out this in bootstrap.js. :D – Michael Aug 14 '15 at 11:49
2

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.

Pavel Strakhov
  • 39,123
  • 5
  • 88
  • 127
koles
  • 21
  • 1
  • 1
    `$('.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` – Steve Perks Jan 17 '13 at 16:49
1

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

Shemeemsha R A
  • 1,416
  • 16
  • 22
0

Even though this question was answered successfully - I came here looking for an answer to a similar problem.

My first item in the carousel was sliding left, like normal, but the second item wasn't behind it. Once the first item was off the screen, the second item would just appear, not slide in. Then it would disappear, and the first item would slide in properly.

If you're having this issue, check that you don't have position:relative; on the .item div.

I added that like so:

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

Turns out that messes things up. Removing position:relative; fixed the issue. Now sliding is smooth and correct.

Steve
  • 1