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

Name type default description
interval number 5000 The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause string "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
    })
    

Method Description
cycle Cycles through the carousel items from left to right.
pause Stops the carousel from cycling through items.
next Cycles to the next item.
prev Cycles 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.

Event Description
slide This event fires immediately when the slide instance method is invoked.
slid This 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.

Heads up! When implementing this carousel, remove the images we have provided and replace them with your own.