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.
Be sure to include Bootstrap's carousel.less in your build. Optionally, include the FlatUI version.
Behavior UI
<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>The usage here is identical to Behavior.Slides. See that page for documentation.