Components

Carousel

Example

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

First slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Second slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

‹ ›

<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
  <div class="active item">
    <img src="..." alt="...">
    <div class="carousel-caption">
      <h3>...</h3>
      <p>...</p>
    </div>
  </div>
  <div class="item">...</div>
  <div class="item">...</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>