Question

I am having trouble implementing the bootstrap carousel. Can anyone look at the following html and js and give me instructions on how to implement the slide. The .js has not been edited and the carousel is installed on the body hero unit. Do I implement the carousel api? How do I define the carousel I am using within the .js file? Thanks.

<div class="carousel">

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

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </div>  

  </div>      

 <!-- 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>

Answer 1

The documentation for Bootstrap Carousel is available here: http://twitter.github.com/bootstrap/javascript.html#carousel

I guess you would need to add something like this to get it running:

<script type="text/javascript">
$(function(){
   $('.carousel').carousel();
});
</script>