CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapcarousel
d_meyer
d_meyer

Reputation: 63

Twitter Bootstrap Carousel Slide Doesn't Work

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>

Upvotes: 6

Views: 32942

Answers (5)

Steve
Steve

Reputation: 1

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.

Upvotes: 0

Shemeemsha R A
Shemeemsha R A

Reputation: 1550

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

Upvotes: 1

Martin Wright
Martin Wright

Reputation: 129

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.

Upvotes: 12

koles
koles

Reputation: 21

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.

Upvotes: 2

Andres I Perez
Andres I Perez

Reputation: 75379

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.

Upvotes: 13

Related Questions