Carousel
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript.
Carousel can have captions, indicators, next/prev buttons.
css class | description |
---|---|
carousel | Defines a carousel element. |
carousel-inner | Defines a container for carousel items. |
carousel-item | Defines a carousel item. |
carousel-caption | Defines a caption for carousel item. |
carousel-indicators | Defines a container for indicators. For example, it can be the <ol> html element. |
carousel-control-prev | Defines a button for sliding to the previous slide. |
carousel-control-next | Defines a button for sliding to the next slide. |
<div class="bd-example">
<div
id="carouselExampleCaptions"
class="carousel slide bg-dark"
style="width:384px; height:384px;"
data-interval="2000"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions"
data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleCaptions"
data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions"
data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/flower_n_1.jpeg"
class="d-block w-100"
alt="...">
<div class="carousel-caption
d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero,
a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="/images/flower_n_2.jpg"
class="d-block w-100" alt="...">
<div class="carousel-caption
d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="/images/flower_n_3.jpeg"
height="384"
class="d-block w-100" alt="...">
<div class="carousel-caption
d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna,
vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleCaptions"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next"
href="#carouselExampleCaptions"
role="button" data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
methods
method | description |
---|---|
carousel(opt) | Initializes the carousel with an optional options object and starts cycling through items. Options object can have following properties:
|
carousel('cycle') | Cycles through the carousel items from left to right. |
carousel('pause') | Stops the carousel from cycling through items. |
carousel(toFrameInd) | Cycles the carousel to a particular frame, index is 0 based. |
carousel('prev') | Cycles to the previous item. |
carousel('next') | Cycles to the next item. |
carousel('dispose') | Destroys an element’s carousel. |
$('.carousel').carousel({
interval: 2000
});
events
event | description |
---|---|
slide.bs.carousel | Fires immediately when the slide method is invoked. |
slid.bs.carousel | Fires when the carousel has completed its slide transition. |
Both events have the following additional properties:
- direction - the direction in which the carousel is sliding, either "left" or "right".
- relatedTarget - the DOM element that is being slid into place as the active item.
- from - the index of the current item.
- to - the index of the next item.
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
});