2015-11-20 00:58:21 +03:00
< div class = "bs-docs-section" >
< h1 id = "carousel" class = "page-header" > Carousel < small > carousel.js< / small > < / h1 >
< p > A slideshow component for cycling through elements, like a carousel. < strong > Nested carousels are not supported.< / strong > < / p >
< h2 id = "carousel-examples" > Examples< / h2 >
< div class = "bs-example" data-example-id = "simple-carousel" >
< div id = "carousel-example-generic" class = "carousel slide" data-ride = "carousel" >
< ol class = "carousel-indicators" >
< li data-target = "#carousel-example-generic" data-slide-to = "0" class = "active" > < / li >
< li data-target = "#carousel-example-generic" data-slide-to = "1" > < / li >
< li data-target = "#carousel-example-generic" data-slide-to = "2" > < / li >
< / ol >
< div class = "carousel-inner" role = "listbox" >
< div class = "item active" >
< img data-src = "holder.js/900x500/auto/#777:#555/text:First slide" alt = "First slide" >
< / div >
< div class = "item" >
< img data-src = "holder.js/900x500/auto/#666:#444/text:Second slide" alt = "Second slide" >
< / div >
< div class = "item" >
< img data-src = "holder.js/900x500/auto/#555:#333/text:Third slide" alt = "Third slide" >
< / div >
< / div >
< a class = "left carousel-control" href = "#carousel-example-generic" role = "button" data-slide = "prev" >
< span class = "glyphicon glyphicon-chevron-left" aria-hidden = "true" > < / span >
< span class = "sr-only" > Previous< / span >
< / a >
< a class = "right carousel-control" href = "#carousel-example-generic" role = "button" data-slide = "next" >
< span class = "glyphicon glyphicon-chevron-right" aria-hidden = "true" > < / span >
< span class = "sr-only" > Next< / span >
< / a >
< / div >
< / div > <!-- /example -->
{% highlight html %}
< div id = "carousel-example-generic" class = "carousel slide" data-ride = "carousel" >
<!-- Indicators -->
< ol class = "carousel-indicators" >
< li data-target = "#carousel-example-generic" data-slide-to = "0" class = "active" > < / li >
< li data-target = "#carousel-example-generic" data-slide-to = "1" > < / li >
< li data-target = "#carousel-example-generic" data-slide-to = "2" > < / li >
< / ol >
<!-- Wrapper for slides -->
< div class = "carousel-inner" role = "listbox" >
< div class = "item active" >
< img src = "..." alt = "..." >
< div class = "carousel-caption" >
...
< / div >
< / div >
< div class = "item" >
< img src = "..." alt = "..." >
< div class = "carousel-caption" >
...
< / div >
< / div >
...
< / div >
<!-- Controls -->
< a class = "left carousel-control" href = "#carousel-example-generic" role = "button" data-slide = "prev" >
< span class = "glyphicon glyphicon-chevron-left" aria-hidden = "true" > < / span >
< span class = "sr-only" > Previous< / span >
< / a >
< a class = "right carousel-control" href = "#carousel-example-generic" role = "button" data-slide = "next" >
< span class = "glyphicon glyphicon-chevron-right" aria-hidden = "true" > < / span >
< span class = "sr-only" > Next< / span >
< / a >
< / div >
{% endhighlight %}
< div class = "bs-callout bs-callout-danger" id = "callout-carousel-accessibility" >
< h4 > Accessibility issue< / h4 >
< 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 >
< / div >
< div class = "bs-callout bs-callout-warning" id = "callout-carousel-transitions" >
< h4 > Transition animations not supported in Internet Explorer 8 & 9< / h4 >
< 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 >
< / div >
< div class = "bs-callout bs-callout-warning" id = "callout-carousel-active" >
< h4 > Initial active element required< / h4 >
< p > The < code > .active< / code > class needs to be added to one of the slides. Otherwise, the carousel will not be visible.< / p >
< / div >
2015-11-20 23:24:39 +03:00
< div class = "bs-callout bs-callout-info" id = "callout-carousel-without-icons" >
2015-11-20 00:58:21 +03:00
< h4 > Glyphicon icons not necessary< / h4 >
< p > The < code > .glyphicon .glyphicon-chevron-left< / code > and < code > .glyphicon .glyphicon-chevron-right< / code > classes are not necessarily needed for the controls. Bootstrap provides < code > .icon-prev< / code > and < code > .icon-next< / code > as plain unicode alternatives.< / p >
< / div >
< h3 > Optional captions< / h3 >
< 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 >
< div class = "bs-example" data-example-id = "carousel-with-captions" >
< div id = "carousel-example-captions" class = "carousel slide" data-ride = "carousel" >
< ol class = "carousel-indicators" >
< li data-target = "#carousel-example-captions" data-slide-to = "0" class = "active" > < / li >
< li data-target = "#carousel-example-captions" data-slide-to = "1" > < / li >
< li data-target = "#carousel-example-captions" data-slide-to = "2" > < / li >
< / ol >
< div class = "carousel-inner" role = "listbox" >
< div class = "item active" >
< img data-src = "holder.js/900x500/auto/#777:#777" alt = "First slide image" >
< div class = "carousel-caption" >
< h3 > First slide label< / h3 >
< p > Nulla vitae elit libero, a pharetra augue mollis interdum.< / p >
< / div >
< / div >
< div class = "item" >
< img data-src = "holder.js/900x500/auto/#666:#666" alt = "Second slide image" >
< div class = "carousel-caption" >
< h3 > Second slide label< / h3 >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit.< / p >
< / div >
< / div >
< div class = "item" >
< img data-src = "holder.js/900x500/auto/#555:#555" alt = "Third slide image" >
< div class = "carousel-caption" >
< h3 > Third slide label< / h3 >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur.< / p >
< / div >
< / div >
< / div >
< a class = "left carousel-control" href = "#carousel-example-captions" role = "button" data-slide = "prev" >
< span class = "glyphicon glyphicon-chevron-left" aria-hidden = "true" > < / span >
< span class = "sr-only" > Previous< / span >
< / a >
< a class = "right carousel-control" href = "#carousel-example-captions" role = "button" data-slide = "next" >
< span class = "glyphicon glyphicon-chevron-right" aria-hidden = "true" > < / span >
< span class = "sr-only" > Next< / span >
< / a >
< / div >
< / div > <!-- /example -->
{% highlight html %}
< div class = "item" >
< img src = "..." alt = "..." >
< div class = "carousel-caption" >
< h3 > ...< / h3 >
< p > ...< / p >
< / div >
< / div >
{% endhighlight %}
< h2 id = "carousel-usage" > Usage< / h2 >
< h3 > Multiple carousels< / h3 >
< 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 >
< h3 > Via data attributes< / h3 >
< 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 >
< 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 >
< h3 > Via JavaScript< / h3 >
< p > Call carousel manually with:< / p >
{% highlight js %}
$('.carousel').carousel()
{% endhighlight %}
< h3 id = "carousel-options" > Options< / h3 >
< 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 >
< div class = "table-responsive" >
< table class = "table table-bordered table-striped js-options-table" >
< thead >
< tr >
< th > Name< / th >
< th > type< / th >
< th > default< / th >
< th > description< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > interval< / td >
< td > number< / td >
< td > 5000< / td >
< td > The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.< / td >
< / tr >
< tr >
< td > pause< / td >
< td > string< / td >
< td > "hover"< / td >
< td > Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.< / td >
< / tr >
< tr >
< td > wrap< / td >
< td > boolean< / td >
< td > true< / td >
< td > Whether the carousel should cycle continuously or have hard stops.< / td >
< / tr >
< tr >
< td > keyboard< / td >
< td > boolean< / td >
< td > true< / td >
< td > Whether the carousel should react to keyboard events.< / td >
< / tr >
< / tbody >
< / table >
< / div > <!-- /.table - responsive -->
< h3 id = "carousel-methods" > Methods< / h3 >
< h4 > < code > .carousel(options)< / code > < / h4 >
< p > Initializes the carousel with an optional options < code > object< / code > and starts cycling through items.< / p >
{% highlight js %}
$('.carousel').carousel({
interval: 2000
})
{% endhighlight %}
< h4 > < code > .carousel('cycle')< / code > < / h4 >
< p > Cycles through the carousel items from left to right.< / p >
< h4 > < code > .carousel('pause')< / code > < / h4 >
< p > Stops the carousel from cycling through items.< / p >
< h4 > < code > .carousel(number)< / code > < / h4 >
< p > Cycles the carousel to a particular frame (0 based, similar to an array).< / p >
< h4 > < code > .carousel('prev')< / code > < / h4 >
< p > Cycles to the previous item.< / p >
< h4 > < code > .carousel('next')< / code > < / h4 >
< p > Cycles to the next item.< / p >
< h3 id = "carousel-events" > Events< / h3 >
< p > Bootstrap's carousel class exposes two events for hooking into carousel functionality.< / p >
< p > Both events have the following additional properties:< / p >
< ul >
< li > < code > direction< / code > : The direction in which the carousel is sliding (either < code > "left"< / code > or < code > "right"< / code > ).< / li >
< li > < code > relatedTarget< / code > : The DOM element that is being slid into place as the active item.< / li >
< / ul >
< p > All carousel events are fired at the carousel itself (i.e. at the < code > < div class="carousel"> < / code > ).< / p >
< div class = "table-responsive" >
< table class = "table table-bordered table-striped bs-events-table" >
< thead >
< tr >
< th > Event Type< / th >
< th > Description< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > slide.bs.carousel< / td >
< td > This event fires immediately when the < code > slide< / code > instance method is invoked.< / td >
< / tr >
< tr >
< td > slid.bs.carousel< / td >
< td > This event is fired when the carousel has completed its slide transition.< / td >
< / tr >
< / tbody >
< / table >
< / div > <!-- /.table - responsive -->
{% highlight js %}
$('#myCarousel').on('slide.bs.carousel', function () {
// do something…
})
{% endhighlight %}
< / div >
