1 <div class=
"bs-docs-section">
2 <h1 id=
"carousel" class=
"page-header">Carousel
<small>carousel.js
</small></h1>
4 <p>A slideshow component for cycling through elements, like a carousel.
<strong>Nested carousels are not supported.
</strong></p>
6 <h2 id=
"carousel-examples">Examples
</h2>
7 <div class=
"bs-example" data-example-id=
"simple-carousel">
8 <div id=
"carousel-example-generic" class=
"carousel slide" data-ride=
"carousel">
9 <ol class=
"carousel-indicators">
10 <li data-target=
"#carousel-example-generic" data-slide-to=
"0" class=
"active"></li>
11 <li data-target=
"#carousel-example-generic" data-slide-to=
"1"></li>
12 <li data-target=
"#carousel-example-generic" data-slide-to=
"2"></li>
14 <div class=
"carousel-inner" role=
"listbox">
15 <div class=
"item active">
16 <img data-src=
"holder.js/900x500/auto/#777:#555/text:First slide" alt=
"First slide">
19 <img data-src=
"holder.js/900x500/auto/#666:#444/text:Second slide" alt=
"Second slide">
22 <img data-src=
"holder.js/900x500/auto/#555:#333/text:Third slide" alt=
"Third slide">
25 <a class=
"left carousel-control" href=
"#carousel-example-generic" role=
"button" data-slide=
"prev">
26 <span class=
"glyphicon glyphicon-chevron-left" aria-hidden=
"true"></span>
27 <span class=
"sr-only">Previous
</span>
29 <a class=
"right carousel-control" href=
"#carousel-example-generic" role=
"button" data-slide=
"next">
30 <span class=
"glyphicon glyphicon-chevron-right" aria-hidden=
"true"></span>
31 <span class=
"sr-only">Next
</span>
34 </div><!-- /example -->
36 <div id=
"carousel-example-generic" class=
"carousel slide" data-ride=
"carousel">
38 <ol class=
"carousel-indicators">
39 <li data-target=
"#carousel-example-generic" data-slide-to=
"0" class=
"active"></li>
40 <li data-target=
"#carousel-example-generic" data-slide-to=
"1"></li>
41 <li data-target=
"#carousel-example-generic" data-slide-to=
"2"></li>
44 <!-- Wrapper for slides -->
45 <div class=
"carousel-inner" role=
"listbox">
46 <div class=
"item active">
47 <img src=
"..." alt=
"...">
48 <div class=
"carousel-caption">
53 <img src=
"..." alt=
"...">
54 <div class=
"carousel-caption">
62 <a class=
"left carousel-control" href=
"#carousel-example-generic" role=
"button" data-slide=
"prev">
63 <span class=
"glyphicon glyphicon-chevron-left" aria-hidden=
"true"></span>
64 <span class=
"sr-only">Previous
</span>
66 <a class=
"right carousel-control" href=
"#carousel-example-generic" role=
"button" data-slide=
"next">
67 <span class=
"glyphicon glyphicon-chevron-right" aria-hidden=
"true"></span>
68 <span class=
"sr-only">Next
</span>
73 <div class=
"bs-callout bs-callout-danger" id=
"callout-carousel-accessibility">
74 <h4>Accessibility issue
</h4>
75 <p>The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.
</p>
78 <div class=
"bs-callout bs-callout-warning" id=
"callout-carousel-transitions">
79 <h4>Transition animations not supported in Internet Explorer
8 & 9</h4>
80 <p>Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer
8 & 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. We have intentionally decided not to include jQuery-based fallbacks for the transitions.
</p>
83 <div class=
"bs-callout bs-callout-warning" id=
"callout-carousel-active">
84 <h4>Initial active element required
</h4>
85 <p>The
<code>.active
</code> class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
</p>
88 <h3>Optional captions
</h3>
89 <p>Add captions to your slides easily with the
<code>.carousel-caption
</code> element within any
<code>.item
</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.
</p>
90 <div class=
"bs-example" data-example-id=
"carousel-with-captions">
91 <div id=
"carousel-example-captions" class=
"carousel slide" data-ride=
"carousel">
92 <ol class=
"carousel-indicators">
93 <li data-target=
"#carousel-example-captions" data-slide-to=
"0" class=
"active"></li>
94 <li data-target=
"#carousel-example-captions" data-slide-to=
"1"></li>
95 <li data-target=
"#carousel-example-captions" data-slide-to=
"2"></li>
97 <div class=
"carousel-inner" role=
"listbox">
98 <div class=
"item active">
99 <img data-src=
"holder.js/900x500/auto/#777:#777" alt=
"First slide image">
100 <div class=
"carousel-caption">
101 <h3>First slide label
</h3>
102 <p>Nulla vitae elit libero, a pharetra augue mollis interdum.
</p>
106 <img data-src=
"holder.js/900x500/auto/#666:#666" alt=
"Second slide image">
107 <div class=
"carousel-caption">
108 <h3>Second slide label
</h3>
109 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
113 <img data-src=
"holder.js/900x500/auto/#555:#5555" alt=
"Third slide image">
114 <div class=
"carousel-caption">
115 <h3>Third slide label
</h3>
116 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
120 <a class=
"left carousel-control" href=
"#carousel-example-captions" role=
"button" data-slide=
"prev">
121 <span class=
"glyphicon glyphicon-chevron-left" aria-hidden=
"true"></span>
122 <span class=
"sr-only">Previous
</span>
124 <a class=
"right carousel-control" href=
"#carousel-example-captions" role=
"button" data-slide=
"next">
125 <span class=
"glyphicon glyphicon-chevron-right" aria-hidden=
"true"></span>
126 <span class=
"sr-only">Next
</span>
129 </div><!-- /example -->
132 <img src=
"..." alt=
"...">
133 <div class=
"carousel-caption">
140 <h2 id=
"carousel-usage">Usage
</h2>
142 <h3>Multiple carousels
</h3>
143 <p>Carousels require the use of an
<code>id
</code> on the outermost container (the
<code>.carousel
</code>) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's
<code>id
</code>, be sure to update the relevant controls.
</p>
145 <h3>Via data attributes
</h3>
146 <p>Use data attributes to easily control the position of the carousel.
<code>data-slide
</code> accepts the keywords
<code>prev
</code> or
<code>next
</code>, which alters the slide position relative to its current position. Alternatively, use
<code>data-slide-to
</code> to pass a raw slide index to the carousel
<code>data-slide-to=
"2"</code>, which shifts the slide position to a particular index beginning with
<code>0</code>.
</p>
147 <p>The
<code>data-ride=
"carousel"</code> attribute is used to mark a carousel as animating starting at page load.
<strong class=
"text-danger">It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.
</strong></p>
149 <h3>Via JavaScript
</h3>
150 <p>Call carousel manually with:
</p>
152 $('.carousel').carousel()
155 <h3 id=
"carousel-options">Options
</h3>
156 <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
<code>data-
</code>, as in
<code>data-interval=
""</code>.
</p>
157 <div class=
"table-responsive">
158 <table class=
"table table-bordered table-striped">
161 <th style=
"width: 100px;">Name
</th>
162 <th style=
"width: 50px;">type
</th>
163 <th style=
"width: 50px;">default
</th>
172 <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
</td>
178 <td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
</td>
184 <td>Whether the carousel should cycle continuously or have hard stops.
</td>
190 <td>Whether the carousel should react to keyboard events.
</td>
194 </div><!-- /.table-responsive -->
196 <h3 id=
"carousel-methods">Methods
</h3>
198 <h4>.carousel(options)
</h4>
199 <p>Initializes the carousel with an optional options
<code>object
</code> and starts cycling through items.
</p>
201 $('.carousel').carousel({
206 <h4>.carousel('cycle')
</h4>
207 <p>Cycles through the carousel items from left to right.
</p>
209 <h4>.carousel('pause')
</h4>
210 <p>Stops the carousel from cycling through items.
</p>
213 <h4>.carousel(number)
</h4>
214 <p>Cycles the carousel to a particular frame (
0 based, similar to an array).
</p>
216 <h4>.carousel('prev')
</h4>
217 <p>Cycles to the previous item.
</p>
219 <h4>.carousel('next')
</h4>
220 <p>Cycles to the next item.
</p>
222 <h3 id=
"carousel-events">Events
</h3>
223 <p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.
</p>
224 <p>Both events have the following additional properties:
</p>
226 <li><code>direction
</code>: The direction in which the carousel is sliding (either
<code>"left"</code> or
<code>"right"</code>).
</li>
227 <li><code>relatedTarget
</code>: The DOM element that is being slid into place as the active item.
</li>
229 <div class=
"table-responsive">
230 <table class=
"table table-bordered table-striped bs-events-table">
233 <th style=
"width: 150px;">Event Type
</th>
239 <td>slide.bs.carousel
</td>
240 <td>This event fires immediately when the
<code>slide
</code> instance method is invoked.
</td>
243 <td>slid.bs.carousel
</td>
244 <td>This event is fired when the carousel has completed its slide transition.
</td>
248 </div><!-- /.table-responsive -->
250 $('#myCarousel').on('slide.bs.carousel', function () {