Bootstrap JS Carousel
JS Carousel (carousel.js)
Carousel 插件是一个用于在元素间循环的组件，比如 轮播（幻灯片）。
学习更多有关 Carousel 的知识, 请访问本站的 Bootstrap 轮播/幻灯片教程.
注意：Internet Explorer 9 及更早版本不支持 Carousel（因为它们使用 CSS3 转换和动画来实现幻灯片效果）。
Carousel 插件类
| 类 | 描述 |
|---|---|
| .carousel | 创建一个轮播/幻灯片 |
| .slide | 在从一个项滑动到下一个项时添加 CSS 过渡和动画效果。如果不想产生这种效果，请删除此样式类 |
| .carousel-indicators | 为轮播添加指示器。这些是每张幻灯片底部的小点（指示轮播中有多少张幻灯片，以及用户当前正在查看的幻灯片） |
| .carousel-inner | 为轮播添加滑动 |
| .icon-next | Unicode图标（箭头指向右侧），用于轮播。这通常用来代替字形图标 |
| .icon-prev | Unicode图标（箭头指向左侧），用于轮播。这通常用来代替字形图标 |
| .item | 指定滑动的内容 |
| .left carousel-control | 向轮播添加一个左按钮，可用让用户在幻灯片之间返回 |
| .right carousel-control | 向轮播添加一个右按钮，可用让用户在幻灯片之间返回 |
| .carousel-caption | 为轮播指定一个标题 |
通过 data-* 属性
data-ride="carousel" 属性激活 carousel 轮播。
data-slide 和 data-slide-to 指定滑动那到哪里。
data-slide 属性可用接受两个值: prev 和 next, data-slide-to 只接受数字。
实例
<!-- 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">
通过 JavaScript
手动:
实例
// Activate Carousel$("#myCarousel").carousel();// Enable Carousel Indicators$(".item").click(function(){$("#myCarousel").carousel(1);});// Enable Carousel Controls$(".left").click(function(){$("#myCarousel").carousel("prev");});
Carousel Options
Options 可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-，如 data-interval=""
| 名称 | 类型 | 默认 | 描述 | 试一试 |
|---|---|---|---|---|
| interval | 数字, 或者 false | 5000 | 指定每张幻灯片之间的延迟（以毫秒为单位） 备注: 将 interval 设置为 false 来停止项自动滑动 | 使用 JS 使用 data |
| pause | 字符串, 或 false | "hover" | 当鼠标指针进入 Carousel 时，暂停轮播进行下一张幻灯片，当鼠标指针离开 Carousel 时，继续滑动 备注: 将 pause 设置为 false 则鼠标悬浮 Carousel 时不会停止轮播 | 使用 JS Using data |
| wrap | boolean | true | 指定 Carousel 是应连续浏览所有幻灯片，还是应在最后一张幻灯片上停止
| 使用 JS 使用 data |
Carousel 方法
下表列出了所有可用的 Carousel 方法。
| 方法 | 描述 | 试一试 |
|---|---|---|
| .carousel(options) | 使用一个选项激活 Carousel。有关有效值，请参见上面的选项 | 试一试 |
| .carousel("cycle") | 从左到右遍历 Carousel 轮播项 | 试一试 |
| .carousel("pause") | 阻止 Carousel 遍历项 | 试一试 |
| .carousel(number) | 转到指定的项（从 0 开始：第一项为 0，第二项为 1，以此类推） | 试一试 |
| .carousel("prev") | 转到前一项 | 试一试 |
| .carousel("next") | 转到下一项 | 试一试 |
Carousel 事件
下表列出了所有可用的 Carousel 事件。
| 事件 | 描述 | 试一试 |
|---|---|---|
| slide.bs.carousel | 在 Carousel 轮播即将从一个项滑动到另一个项时发生 | 试一试 |
| slid.bs.carousel | 当轮播从一个项滑动到另一个项时发生 | 试一试 |
更多实例
轮播文字说明
为每一个 <div class="item"> 都添加一个 <div class="carousel-caption"> 来给每个轮播项都创建文字说明:
实例
<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>Beautiful 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>Beautiful 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>