Bootstrap JS Carousel
JS Carousel (carousel.js)
Carousel 插件是一个用于循环切换元素的组件，例如轮播（幻灯片）。
有关 Carousel 的教程，请阅读我们的 Bootstrap Carousel 教程。
注意： Carousel 在 Internet Explorer 9 及更早版本中不支持（因为它使用 CSS3 过渡和动画来实现滑动效果）。
Carousel 插件类
| 类 | 描述 |
|---|---|
| .carousel | 创建轮播 |
| .slide | 在从一个项目滑动到下一个项目时添加 CSS 过渡和动画效果。如果您不想要此效果，请删除此类。 |
| .carousel-indicators | 为轮播添加指示器。这些是每个幻灯片底部的点（指示轮播中有多少个幻灯片，以及用户当前正在查看哪个幻灯片）。 |
| .carousel-inner | 为轮播添加幻灯片 |
| .icon-next | Unicode 图标（指向右箭头的图标），用于轮播。这通常用于替换 glyphicon。 |
| .icon-prev | Unicode 图标（指向左箭头的图标），用于轮播。这通常用于替换 glyphicon。 |
| .item | 指定每个幻灯片的内容 |
| .left carousel-control | 为轮播添加一个左侧按钮，允许用户在幻灯片之间后退。 |
| .right carousel-control | 为轮播添加一个右侧按钮，允许用户在幻灯片之间前进。 |
| .carousel-caption | 为轮播指定标题 |
通过 data-* 属性
data-ride="carousel" 属性用于激活轮播。
data-slide 和 data-slide-to 属性指定要转到的幻灯片。
data-slide 属性接受两个值：prev 或 next，而 data-slide-to 接受数字。
示例
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel 指示器 -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!-- Carousel 控件 -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
自己动手试一试 »
通过 JavaScript
使用以下命令手动启用：
示例
// 激活 Carousel
$("#myCarousel").carousel();
// 启用 Carousel 指示器
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// 启用 Carousel 控件
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
自己动手试一试 »
Carousel 选项
可以通过 data 属性或 JavaScript 传递选项。对于 data 属性，将选项名称附加到 data-，例如 data-interval="”。
| 名称 | 类型 | 默认值 | 描述 | 试一试 |
|---|---|---|---|---|
| interval | 数字，或布尔值 false | 5000 | 指定每个幻灯片之间的延迟（以毫秒为单位）。 注意：将 interval 设置为 false 可停止项目自动滑动。 |
使用 JS 使用 data |
| pause | 字符串，或布尔值 false | "hover" | 当鼠标指针进入轮播时，暂停轮播切换到下一张幻灯片，当鼠标指针离开轮播时，恢复滑动。 注意：将 pause 设置为 false 可停止鼠标悬停暂停功能。 |
使用 JS 使用 data |
| wrap（换行） | boolean | true | 指定轮播是否应该连续循环所有幻灯片，还是在最后一张幻灯片停止。
|
使用 JS 使用 data |
Carousel 方法
下表列出了所有可用的轮播方法。
| 方法 | 描述 | 试一试 |
|---|---|---|
| .carousel(options) | 使用一个选项激活轮播。有关有效值，请参阅上面的选项。 | 试一试 |
| .carousel("cycle") | 从左到右循环轮播项目。 | 试一试 |
| .carousel("pause") | 停止轮播切换项目。 | 试一试 |
| .carousel(number) | 转到指定项目（基于零：第一个项目是 0，第二个项目是 1，依此类推）。 | 试一试 |
| .carousel("prev") | 转到上一项。 | 试一试 |
| .carousel("next") | 转到下一项。 | 试一试 |
Carousel 事件
下表列出了所有可用的轮播事件。
| 事件 | 描述 | 试一试 |
|---|---|---|
| slide.bs.carousel | 当轮播即将从一个项目滑动到另一个项目时触发。 | 试一试 |
| slid.bs.carousel | 当轮播完成从一个项目滑动到另一个项目时触发。 | 试一试 |
更多示例
幻灯片标题
在每个 <div class="item"> 中添加 <div class="carousel-caption"> 来为每个幻灯片创建标题。
示例
<div id="myCarousel" class="carousel slide" data-ride="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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- 滑块的包装器 -->
<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>Chania 的氛围带有佛罗伦萨和威尼斯的感觉。</p>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>Chania 的氛围带有佛罗伦萨和威尼斯的感觉。</p>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>克里特岛 Kolymbari 的美丽鲜花。</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>克里特岛 Kolymbari 的美丽鲜花。</p>
</div>
</div>
</div>
<!-- 左右控制 -->
<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">上一张</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">下一张</span>
</a>
</div>
自己动手试一试 »
