Dojo Bootstrap
Modules

Carousel Module

Usage

Via data attributes

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Via JavaScript

Call carousel manually with:

query('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".

Nametypedefaultdescription
intervalnumber5000The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pausestring"hover"Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

    query('.carousel').carousel({
      interval: 2000
    })

MethodDescription
cycleCycles through the carousel items from left to right.
pauseStops the carousel from cycling through items.
nextCycles to the next item.
prevCycles to the previous item.
<number>Cycles the carousel to a particular frame (0 based, similar to an array).

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

EventDescription
slideThis event fires immediately when the slide instance method is invoked.
slidThis event is fired when the carousel has completed its slide transition.

Example

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.