Bootstrap 轮播插件
轮播插件
轮播插件是一个用于循环显示元素的组件，例如轮播（幻灯片）。
提示： 插件可以单独包含（使用 Bootstrap 的独立 "carousel.js" 文件），也可以一次性全部包含（使用 "bootstrap.js" 或 "bootstrap.min.js"）。
轮播示例
注意：Internet Explorer 9 及更早版本无法正确支持轮播（因为它们使用 CSS3 过渡和动画来实现幻灯片效果）。
如何创建轮播
以下示例展示了如何创建一个基本的轮播
示例
<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>
</ol>
<!-- 滑块的包装器 -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="洛杉矶">
</div>
<div class="item">
<img src="chicago.jpg" alt="芝加哥">
</div>
<div class="item">
<img src="ny.jpg" alt="纽约">
</div>
</div>
<!-- 左右控制 -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">上一张</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">下一张</span>
</a>
</div>
自己动手试一试 »
示例解释
最外层的 <div>
轮播需要使用一个 id（在此示例中为 id="myCarousel"），以便轮播控件正常工作。
class="carousel" 指定此 <div> 包含一个轮播。
.slide 类添加了 CSS 过渡和动画效果，使项目在显示新项目时滑动。如果您不需要此效果，请省略此类别。
data-ride="carousel" 属性告诉 Bootstrap 在页面加载时立即开始动画轮播。
"指示器" 部分
指示器是每个幻灯片底部的小圆点（表示轮播中有多少张幻灯片，以及用户当前正在查看哪张幻灯片）。
指示器在带有类 .carousel-indicators 的有序列表中指定。
data-target 属性指向轮播的 id。
data-slide-to 属性指定点击特定圆点时要跳转到哪个幻灯片。
"幻灯片容器" 部分
幻灯片在带有类 .carousel-inner 的 <div> 中指定。
每个幻灯片的内容都在带有类 .item 的 <div> 中定义。这可以是文本或图像。
.active 类需要添加到其中一张幻灯片中。否则，轮播将不可见。
"左右控制" 部分
此代码添加了“左”和“右”按钮，允许用户手动在幻灯片之间来回切换。
data-slide 属性接受关键字 "prev" 或 "next"，它们会改变幻灯片相对于其当前位置的位置。
为幻灯片添加标题
在每个 <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>
</ol>
<!-- 滑块的包装器 -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="夏尼亚">
<div class="carousel-caption">
<h3>洛杉矶</h3>
<p>洛杉矶总是那么有趣！</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="芝加哥">
<div class="carousel-caption">
<h3>芝加哥</h3>
<p>谢谢你，芝加哥！</p>
</div>
</div>
<div class="item">
<img src="ny.jpg" alt="纽约">
<div class="carousel-caption">
<h3>纽约</h3>
<p>我们热爱大苹果！</p>
</div>
</div>
</div>
<!-- 左右控制 -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">上一张</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">下一张</span>
</a>
</div>
自己动手试一试 »
完整的 Bootstrap 轮播参考
有关所有轮播选项、方法和事件的完整参考，请参阅我们的 Bootstrap JS 轮播参考。
