Controlling Carousel in Twitter Bootstrap 2.0

Question

I'm testing out the new carousel feature in bootstrap 2.0 and having difficulties making the nav arrows function correctly. The documentation is a little thin at the moment and i'm a newbie of sorts.

This is my html:

<div class="span9">

<div id="myCarousel" class="carousel slide">

  <!-- Carousel items -->
  <div class="carousel-inner">

  <div class="item active">

  <img src="img/testa.jpeg">

  <div class="carousel-caption">

  <h4>First Thumbnail label</h4>
  <p>Blah Blah Blah</p>

  </div><!-- Carousel caption -->

  </div><!-- items -->

  <div class="item">

  <img src="img/testb.jpeg">

  <div class="carousel-caption">

  <h4>First Thumbnail label</h4>
  <p>Blah Blah Blah</p>

  </div><!-- Carousel caption -->

  </div><!-- items -->

  </div><!-- Carousel inner -->

  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>

  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>


  </div><!-- Carousel -->

</div><!-- span -->

I've activated the carousel in javascript:

$('#myCarousel').carousel()

and that works. However the arrows don't move / cycle through the images when you click on them.

I'm sure it's something simple i'm missing. Thanks for your help.

Answer 1

I had a similar problem and discovered my version of jQuery was outdated. Perhaps make sure you are running the latest version, the Bootstrap Docs are running version 1.7.1 at present. After updating to 1.7.1 the Next and Previous buttons worked fine.