Search within TutorialsPark

Twitter Bootstrap Carousel


Use Carousel to add a slider to your Webpage


Twitter Bootstrap: Carousel Slide via Data Attributes

1. Firstly, a Carousel is a responsive, flexible slider to display images, videos, iframes or any other content.

2. The attribute data-slide is assumes two values prev and next, used as controls for the slider.

3. The attribute data-slide-to takes raw slide index as a value, to slide to the designated index.Indexing begins with [0].

4. A Caption can be added using the class .carousel-caption within an .item.

Example: Twitter Bootstrap Carousel using Data-Attributes

Give it a TRY! »

Twitter Bootstrap: Carousel Using Javascript

1. A carousel can be called manually using Javascript $('selector').carousel method.

Example:Twitter Bootstrap Carousel using Javascript

Give it a TRY! »

Twitter Bootstrap: Options

1. Various options can be passed using data attributes or javascript

2.For data attributes add the option name to data- , as in data-pause="hover".


Name Type Default Description
interval number 5000 The time delay in between the automatic cycling of slides. If the value is false, the carousel will not automatically cycle
pause string hover To pause the carousel when the mouse pointer is hovered over the slide
wrap boolean true To define whether the carousel should cycle continously or have hard stops

Twitter Bootstrap: Carousel Javascript Method - .carousel(options)

1. It enables you to initialize the carousel with an optional options object and then start cycling through the items.

Example:Twitter Bootstrap Carousel Javascript Method .carousel(options)

Give it a TRY! »

Twitter Bootstrap: Carousel Javascript Method - .carousel('cycle')

1. The Method .carousel('cycle') is used to cycle through the carousel items from left to right.

Example:Twitter Bootstrap Carousel Javascript Method .carousel(cycle)

Give it a TRY! »

Twitter Bootstrap: Carousel Javascript Method - .carousel('pause')

1. The Method .carousel('pause') is used to pause the carousel from cycling through items.

Example:Twitter Bootstrap Carousel Javascript Method .carousel('pause')

Give it a TRY! »

Twitter Bootstrap: Carousel Javascript Method - .carousel('number')

1. The Method .carousel('number') is used to cycle through the carousel to a particular frame. [0] indexed numbering.

Example:Twitter Bootstrap Carousel Javascript Method .carousel('number')

Give it a TRY! »

Twitter Bootstrap: Carousel Javascript Method - .carousel('prev')

1. The Method .carousel('prev') is used to cycle through the carousel items to the previous slide.

Example:Twitter Bootstrap Carousel Javascript Method .carousel('prev')

Give it a TRY! »

Twitter Bootstrap: Carousel Javascript Method - .carousel('next')

1. The Method .carousel('next') is used to cycle through the carousel items to next frame.

Example:Twitter Bootstrap Carousel Javascript Method .carousel('next')

Give it a TRY! »

Twitter Bootstrap: Options

1. Bootstrap's carousel has two events based on carousel functionality

data-pause="hover".

Table: Events table

Event Type Description
slid.bs.carousel The event is fired immediately when the slide instance method is invoked.
slid.bs.carousel The event is fired when the carousel has completed its transition slide

Example:Twitter Bootstrap Carousel events

Give it a TRY! »