Bootstrap 幻灯片（Carousel）插件

Carousel 插件

Carousel 插件是一个用于在元素间循环的组件，像一个 carousel（幻灯片）。

Carousel 实例

Los Angeles

LA is always so much fun!

Chicago

Thank you, Chicago!

New York

We love the Big Apple!

上一页 下一页

如何创建一个图片轮播

下面的实例展示了如何创建一个基础的图片轮播:

实例

 <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="/znadmin/md/4622/0.jpg" alt="Los Angeles">
  </div>
  <div class="item">
   <img src="/znadmin/md/4622/1.jpg" alt="Chicago">
  </div>
  <div class="item">
   <img src="/znadmin/md/4622/2.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">上一页</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"），才能使 carousel 控件正常运行。

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 属性可以使用 "上一页" 或 "下一页", 这会改变相对于当前位置的幻灯片位置。

给幻灯片添加标题

Add <div class="carousel-caption"> within each <div class="item"> to create a caption for each slide:

实例

<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="/images/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="/images/chicago.jpg" alt="Chicago">
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago!</p>
      </div>
    </div>
    <div class="item">
      <img src="/images/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">上一页</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 幻灯片参考。