Sandbox: JavaScript

A simple carousel without animation. This example uses Bootstrap's HTML conventions, but the behavior doesn't really care about it. You specify selectors for all the slides, controls, etc. and the Behavior just manages pagination and adding the active class.

See also: Behavior.BS.Carousel

Example

<div id="myCarousel" class="carousel slide" data-behavior="Slides" data-slides-options="
  'next': '.fui-arrow-right',
  'back': '.fui-arrow-left',
  'slides': '.carousel-inner .item',
  'controls': '.carousel-indicators li',
  'loop': true,
  'backWrap': true
">
	<!-- 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>

Behavior Options

These options apply only to the data- tag invocation.

Name type default description
backWrap boolean false If true when the user clicks back from the first slide (to the left) the slideshow will loop around and show the last slide.
loop boolean false If true when the user clicks on the next button (to the right) from the last slide the slideshow will look around and show the first slide.
next string '!.carousel .slide-nav li a.next' The selector to find the next button.
back string '!.carousel .slide-nav li a.back' The selector to find the back button.
slides string 'dl' The selector to find the slides themselves
activeClass string 'active' The class to add to the active slide.
controls string '!.carousel .slide-nav li a.jump' The selector to find the corresponding tabs that show their corresponding slide.

Note These must have href="#id" values that correspond to the ids of the slides. So if slide 1 has the id slide1 then these controls would link to #slide1.

autoPlay boolean true If true the slideshow will automatically progress until the user interacts with it.
autoPlayPause number 5000 The duration to wait before advancing the slide.
startShowDelay number 0 The period to wait after the user clicks the next button before setting the next slide to be active. Not really intended to be used unless you are animating the slides. See Behavior.BS.Carousel.
transitionPause number 0 The period to wait after the next slide has been set to active before firing the event for it. Again, only really used for animations.
startIndex number 0 The first slide to show.