Sandbox: JavaScript

This is the Bootstrap specific carousel with animations. It's basically the same as Behavior.Slides with a slightly different configuration and some extra logic to add the left, right, prev, and next at the appropriate times such that it animates with those classes.

Less Component Required

Be sure to include Bootstrap's carousel.less in your build. Optionally, include the FlatUI version.

Example

<div id="myCarousel" class="carousel slide" data-behavior="BS.Carousel">
	<!-- Indicators -->
  <ol class="carousel-indicators">
    <!-- can use #id references or not; uses index of the element otherwise -->
    <li href="#item1"></li>
    <li href="#item2"></li>
    <li href="#item3"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active" id="item1">
      <img alt="Image 01" src="/assets/behavior_ui/dist/prod/flat-ui/images/image-01-af5d80708fa11cb80dea5acac5929de4.jpg" />
      <div class="carousel-caption">
        <h3>Thumbnail label</h3>
        <p>Slide number 1.</p>
      </div>
    </div>
    <div class="item" id="item2">
      <img alt="Image 02" src="/assets/behavior_ui/dist/prod/flat-ui/images/image-02-06ba81be6e4278dfde94d84d368c2340.jpg" />
      <div class="carousel-caption">
        <h3>Thumbnail label</h3>
        <p>Slide number 2.</p>
      </div>
    </div>
    <div class="item" id="item3">
      <img alt="Image 03" src="/assets/behavior_ui/dist/prod/flat-ui/images/image-03-b5a3b3e1661c3791e47e2fc80a205044.jpg" />
      <div class="carousel-caption">
        <h3>Thumbnail label</h3>
        <p>Slide number 3.</p>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control fui-arrow-left"></a>
  <a class="right carousel-control fui-arrow-right"></a>
</div>

Usage

The usage here is identical to Behavior.Slides. See that page for documentation.