twitter-bootstrap Basic Javascript usage and initialization


Example

Carousel components can be instantiated via jQuery with the function $('.carousel').carousel(options), where $('.carousel') is a top-level reference to the specific carousel and options is a Javascript object specifying the carousel's default attributes.

The options object allows for multiple properties to be defined which will affect how the carousel behaves. These properties are defined as such:

  • The interval property accepts a Javascript number type which allows a user to define the amount of time the carousel displays a given carousel slide for. If the boolean value false is specified, the carousel will not cycle automatically.
  • The pause property accepts a Javascript string type which toggles behavior where the carousel's automatic cycling is paused when the user's mouse enters the carousel. The default (and only) value accepted is "hover".
  • The wrap property accepts a Javascript boolean type which allows a user to define whether or not they want the carousel to continuously cycle without stopping on a given slide.
  • The keyboard property accepts a Javascript boolean type which allows a user to define whether or not they want the carousel to respond to keyboard events.

Here is an example of the basic Javascript usage:

$('#carCarousel').carousel({ interval: 2500, pause: "hover", wrap: false, keyboard: true });

As with other Bootstrap components, the carousel's options can also be specified in HTML via data attributes.