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="Los
Angeles">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="item">
<img src="ny.jpg" alt="New
York">
</div>
</div>
<!-- 左右控制 -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
亲自试一试 »
实例解析
最外面的 <div>:
轮播需要使用 id (在本例中为 id="myCarousel") ，才能使轮播控件正常工作。
class="carousel" 指定此 <div> 包含轮播。
.slide 类添加了CSS转换和动画效果，使项目在显示新项目时滑动。如果你不想要这个效果，就省略这个类。
data-ride="carousel" 属性告诉aa在页面加载时立即开始设置轮播的动画。
"Indicators" 部分:
Indicators 指示器是每张幻灯片底部的小点（指示轮播中有多少张幻灯片，以及用户当前正在查看的幻灯片）。
指示器在 .carousel-indicators 类的有序列表中指定。
data-target 属性指向轮播的 id。
data-slide-to 属性指定单击特定点时要转到的幻灯片。
"Wrapper for slides" 部分:
幻灯片在 <div> 元素的 .carousel-inner 类中指定。
每张幻灯片的内容在 .item 类的 <div> 中定义。这可以是文本或图像。
.active 类需要添加到其中一张幻灯片中。否则，轮播将不可见。
"Left and right controls" 部分:
该代码添加了 "left" 和 "right" 按钮，允许用户手动在幻灯片之间来回切换。
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>Los Angeles</h3>
<p>LA is
always so much fun!</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you,
Chicago!</p>
</div>
</div>
<div class="item">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the
Big Apple!</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">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
亲自试一试 »
完整 Bootstrap 轮播参考
有关所有轮播的选项、方法和事件的完整参考，请访问 Bootstrap JS 轮播参考。
