Bootstrap Carousel Plugin
The Bootstrap Carousel plugin is a flexible and responsive way to add sliders to your site. In addition, the content is also flexible enough to be images, iframes, videos, or any other type of content you want to place.
If you want to reference the plugin's functionality separately, then you need to referencecarousel.js. Alternatively, asBootstrap Plugins Overviewmentioned in the chapter, you can referencebootstrap.jsor the compressed version ofbootstrap.min.js。
Example
Below is a simple slideshow that uses the Bootstrap Carousel plugin to display a generic component for cycling elements. To implement the carousel, you only need to add the code with this markup. No data attributes are needed; simple class-based development is sufficient.
Example
<div id="myCarousel" class="carousel slide">
<!--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>
</ol>
<!--Carousel items-->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
</div>
</div>
<!--Carousel navigation-->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
Try it »
The result is as follows:
Optional Captions
You can use.iteminside.carousel-captionelement to add captions to slides.
Example
<div id="myCarousel" class="carousel slide">
<!--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>
</ol>
<!--Carousel items-->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
<div class="carousel-caption">Caption 1</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
<div class="carousel-caption">Caption 2</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
<div class="carousel-caption">Caption 3</div>
</div>
</div>
<!--Carousel navigation-->
<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 »
The result is as follows:
Usage
- Via data attributes: Using data attributes makes it easy to control the position of the carousel.
- Attributedata-slideaccepts the keywordprevornext, used to change the position of the slide relative to its current position.
- Usedata-slide-toto pass a raw slide index to the carousel,data-slide-to="2"which moves the slider to a specific index, with indexing starting from 0.
- data-ride="carousel"The attribute is used to mark that the carousel starts animating on page load.
- Via JavaScript: The carousel can be manually invoked via JavaScript, as shown below:
$('.carousel').carousel()
Options
Some options are passed via data attributes or JavaScript. The following table lists these options:
| Option Name | Type/Default Value | Data Attribute Name | Description |
|---|---|---|---|
| interval | number Default: 5000 | data-interval | The amount of delay between automatically cycling items. If false, the carousel will not cycle automatically. |
| pause | string Default: "hover" | data-pause | Pauses the carousel cycling when the mouse enters, and resumes the carousel cycling when the mouse leaves. |
| wrap | boolean Default: true | data-wrap | Whether the carousel cycles continuously. |
Methods
Below are some useful methods in the Carousel plugin:
| Method | Description | Example |
|---|---|---|
| .carousel(options) | Initializes the carousel with an optional options object and starts cycling items. |
$('#identifier').carousel({
interval: 2000
})
|
| .carousel('cycle') | Cycles carousel items from left to right. |
$('#identifier').carousel('cycle')
|
| .carousel('pause') | Stops the carousel from cycling items. |
$('#identifier').carousel('pause') |
| .carousel(number) | Cycles the carousel to a particular frame (counting starts from 0, similar to an array). |
$('#identifier').carousel(number) |
| .carousel('prev') | Cycles the carousel to the previous item. |
$('#identifier').carousel('prev') |
| .carousel('next') | Cycles the carousel to the next item. |
$('#identifier').carousel('next') |
Example
The following example demonstrates the usage of the methods:
Example
<div id="myCarousel" class="carousel slide">
<!--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>
</ol>
<!--Carousel items-->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
</div>
</div>
<!--Carousel navigation-->
<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>
<!--Control buttons-->
<div style="text-align:center;">
<input type="button" class="btn start-slide" value="Start">
<input type="button" class="btn pause-slide" value="Pause">
<input type="button" class="btn prev-slide" value="Previous Slide">
<input type="button" class="btn next-slide" value="Next Slide">
<input type="button" class="btn slide-one" value="Slide 1">
<input type="button" class="btn slide-two" value="Slide 2">
<input type="button" class="btn slide-three" value="Slide 3">
</div>
</div>
<script>
$(function(){
//Initialize carousel
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
//Stop carousel
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
//Cycle to previous item
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
//Cycle to next item
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
//Cycle to a specific frame
$(".slide-one").click(function(){
$("#myCarousel").carousel(0);
});
$(".slide-two").click(function(){
$("#myCarousel").carousel(1);
});
$(".slide-three").click(function(){
$("#myCarousel").carousel(2);
});
});
</script>
Try it »
The result is as follows:
Events
The following table lists the events used in the Carousel plugin. These events can be used as hooks in functions.
| Event | Description | Example |
|---|---|---|
| slide.bs.carousel | This event is triggered immediately when the slide instance method is called. |
$('#identifier').on('slide.bs.carousel', function () {
// 执行一些动作...
})
|
| slid.bs.carousel | This event is triggered when the carousel completes the slide transition effect. |
$('#identifier').on('slid.bs.carousel', function () {
// 执行一些动作...
})
|
Example
The following example demonstrates the usage of events:
Example
<div id="myCarousel" class="carousel slide">
<!--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>
</ol>
<!--Carousel items-->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
</div>
</div>
<!--Carousel navigation-->
<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>
<script>
$(function(){
$('#myCarousel').on('slide.bs.carousel', function () {
alert("This event is triggered immediately when the slide instance method is called.");
});
});
</script>
Try it »
The result is as follows:
