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