Implementing twitter bootstrap carousel v2.3.2

arboles picture arboles · Feb 8, 2012 · Viewed 34.5k times · Source

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

Kris Hollenbeck picture Kris Hollenbeck · Feb 24, 2012

Note: this answer was originally for Bootstrap 2.3.2 (may not work with version 3)

You have to put the class "item" on all of your slides and the class "active" on the first slide. This worked for me.

<div class="carousel">
  <div class="carousel-inner">


<!-- your slide -->

     <div class="hero-unit item active">
                <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>
</div>

And like Christopher said you need to use this function to initiate it.

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