Bootstrap JS Carousel
JS Carousel (carousel.js)
The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).
For a tutorial about Carousels, read our Bootstrap Carousel Tutorial.
 |
Note: Carousels are not supported properly in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve the slide effect). |
|---|
The Carousel Plugin Classes
| Class | Description |
|---|---|
| .carousel | Creates a carousel |
| .slide | Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect |
| .carousel-indicators | Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing) |
| .carousel-inner | Adds slides to the carousel |
| .item | Specifies the content of each slide |
| .left carousel-control | Adds a left button to the carousel, which allows the user to go back between the slides |
| .right carousel-control | Adds a right button to the carousel, which allows the user to go forward between the slides |
| .carousel-caption | Specifies a caption for the carousel |
Via data-* Attributes
The data-ride="carousel" attribute activates the carousel.
The data-slide and data-slide-to attributes specifies which slide to go to.
The data-slide attribute accepts two values: prev or
next, while
data-slide-to accept numbers.
<!--
Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--
Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!--
Carousel Controls -->
<a
class="left carousel-control" href="#myCarousel" data-slide="prev">
Try it
Via JavaScript
Enable manually with:
// Activate Carousel
$("#myCarousel").carousel();
// Enable
Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
Try it
Carousel Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 |
Specifies the delay (in milliseconds) between each slide. Note: Set interval to false to stop the items from automatically sliding |
Using JS Using data |
| pause | string, or the boolean false | "hover" | Pauses the carousel from going through the next slide when the mouse
pointer enters the carousel, and resumes the sliding when the mouse pointer
leaves the carousel Note: Set pause to false to stop the ability to pause on hover |
Using JS Using data |
| wrap | boolean | true | Specifies whether the carousel should go through all slides continuously,
or stop at the last slide
|
Using JS Using data |
Carousel Methods
The following table lists all available carousel methods.
| Method | Description | Try it |
|---|---|---|
| .carousel(options) | Activates the carousel with an option. See options above for valid values | Try it |
| .carousel("cycle") | Goes through the carousel items from left to right | Try it |
| .carousel("pause") | Stops the carousel from going through items | Try it |
| .carousel(number) | Goes to a specified item (zero-based: first item is 0, second item is 1, etc..) | Try it |
| .carousel("prev") | Goes to the previous item | Try it |
| .carousel("next") | Goes to the next item | Try it |
Carousel Events
The following table lists all available carousel events.
| Event | Description | Try it |
|---|---|---|
| slide.bs.carousel | Occurs when the carousel is about to slide from one item to another | Try it |
| slid.bs.carousel | Occurs when the carousel has finished sliding from one item to another | Try it |
Examples
Captions to Slides
Add <div class="carousel-caption"> within each <div
class="item"> to create a caption for each slide:
Example
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The
atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
<div
class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
<div
class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a
class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Try it Yourself »