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 轮播参考