Sandbox: JavaScript

Sets a Slides-based behavior to a specific slide (primarily for restarting a carousel).

Basic Usage

Restart carousel

<p><a class="btn btn-default" data-trigger="setSlide"
  data-setslide-target="!body #myCarousel"
>
  Restart carousel
</a>
</p>
<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>

Delegator Options

These options apply only to the data- tag invocation.

Name type default description
target string The element that has the Slides-based behavior
slide string 0 The index of the slide to switch to.