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="Chania">
<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 轮播参考.
