Bootstrap Carousel
Bootstrap Carousel plugin
The Bootstrap Carousel plugin is a flexible and responsive way to add sliders to your site. Beyond that, the content is flexible enough and can be images, iframes, videos, or any other type of content you want to place.
If you want to reference the functionality of this plug-in separately, then you need to reference carousel.js. Alternatively, as mentioned in the Bootstrap plugin overview chapter, you can reference bootstrap.js or the minified version of bootstrap.min.js.
Example
The following is a simple slideshow that uses the Bootstrap Carousel plug-in to display a common component that loops elements. To implement a carousel, you just need to add code with that tag. There is no need to use the data attribute, just simple class-based development.
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title> <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div id="myCarousel" class="carousel slide"> <!-- 轮播（Carousel）指标 --> <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）项目 --> <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）导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> </body> </html>
Run Instance»
Click the "Run Instance" button to view the online instance
Optional Caption
You can add a caption to a slide via the .carousel-caption element within .item. Just place any optional HTML there and it will automatically align and format. The following example demonstrates this:
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title> <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div id="myCarousel" class="carousel slide"> <!-- 轮播（Carousel）指标 --> <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）项目 --> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> <div class="carousel-caption">标题 1</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> <div class="carousel-caption">标题 2</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> <div class="carousel-caption">标题 3</div> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> </body> </html>
Run Instance»
Click the "Run Instance" button to view Online example
Usage
Through the data attribute: The position of the carousel can be easily controlled using the data attribute.
Attributedata-slide Accepts the keyword prev or next, used to change the slide relative at the current location.
Use data-slide-to to pass a raw sliding index to the carousel, data-slide-to="2" will Move the slider to a specific index, counting from 0.
data-ride="carousel" The attribute is used to mark the carousel to start animation when the page loads.
Via JavaScript: Carousel can be manually called via JavaScript as follows:
$('.carousel').carousel()
Options
Some options are passed through the data attribute or JavaScript. The following table lists these options:
| Option Name | Type/Default Value | Data Property Name | Description |
|---|---|---|---|
| interval | number Default value: 5000 | data-interval | Auto The amount of time to delay between each item in the loop. If false, the carousel will not automatically loop. |
| pause | string Default value: "hover" | data-pause | The carousel loop is paused when the mouse enters and resumes when the mouse leaves. |
| wrap | boolean Default value: true | data-wrap | Carousel Whether to cycle continuously. |
Methods
The following are some useful methods in the Carousel plugin:
| Method | Description | Instance |
|---|---|---|
| .carousel(options) | Initialize the carousel as an optional options object, and Start cycling projects. | $('#identifier').carousel({
interval: 2000
}) |
| .carousel('cycle') | Cycle the carousel items from left to right. | $('#identifier').carousel('cycle') |
| .carousel('pause') | Stop the carousel loop item. | $('#identifier').carousel('pause') |
| .carousel(number) | Loop to a specific frame (counting from 0, similar to an array). | $('#identifier').carousel(number) |
| .carousel('prev') | Cycle to the previous item. | $('#identifier').carousel('prev') |
| .carousel('next') | Cycle to the next item. | $('#identifier').carousel('next') |
Example
The following example demonstrates the usage of the method
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 轮播（Carousel）插件方法</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<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）项目 -->
<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）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
<!-- 控制按钮 -->
<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(){
// 初始化轮播
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
// 停止轮播
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
// 循环轮播到上一个项目
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
// 循环轮播到下一个项目
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
// 循环轮播到某个特定的帧
$(".slide-one").click(function(){
$("#myCarousel").carousel(0);
});
$(".slide-two").click(function(){
$("#myCarousel").carousel(1);
});
$(".slide-three").click(function(){
$("#myCarousel").carousel(2);
});
});
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
Events
The table below The events to be used in the Carousel plug-in are released. These events can be used as hooks in functions.
| Event | Description | Instance |
|---|---|---|
| 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
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 轮播（Carousel）插件事件</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<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）项目 -->
<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）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
<script>
$(function(){
$('#myCarousel').on('slide.bs.carousel', function () {
alert("当调用 slide 实例方法时立即触发该事件。");
});
});
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
