网页轮播

一个幻灯片组件，用来循环显示图片元素，或者滚动的文字，就像轮播一样。嵌套的轮播是不受支持的。

<div class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

可用的选项

在任何的.carousel-item元素上都可以轻松的通过使用.carousel-caption来给你的幻灯片加上说明文字。在那里面加上任何可选的 HTML，都将自动对齐和格式化。

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

用法

多个轮播

轮播要求在最外层的容器（即该.carousel）中用一个id，来让轮播控件正常工作。如果添加多个轮播，或者修改了一个轮播的id，请务必要更新相关的控件。

利用data属性

使用data属性可以轻松控制轮播的滑动方向。data-slide接受一个关键词prev或者next，它用于改变当前滑动的方向。另外，使用data-slide-to可以向轮播传递一个原生的索引。data-slide-to="2"可以让轮播把滑动位置转到特定的索引，这个索引从0开始计数。

data-ride="carousel"属性用来标记一个轮播在网页载入时动画的起点。它不能用于结合JavaScript显式初始化同一个轮播（冗余和不必要的）。

利用JavaScript

调用轮播：

$('.carousel').carousel()

选项

可以利用data属性或者JavaScript传递选项。如果用data属性，请把选项名追加到data-后面，比如说写成data-interval=""。

方法

.carousel(options)

用一个可选的选项object初始化轮播，开始滚动帧。

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

从左到右开始滚动轮播。

.carousel('pause')

停止滚动轮播。

.carousel(number)

轮播滚动到一个特定的帧（基数是0，类似于一个数组。）

.carousel('prev')

滚到前一帧

.carousel('next')

滚到下一帧。

事件

Bootstrap的轮播类插件为轮播相关的回调函数提供了事件接口。这些事件都有下面的额外的属性：

• direction: 方向：轮播滑动的方向（可以是 "left" 或者"right"）。
• relatedTarget: 滑动到中间位置的DOM对象，即激活项。

所有的轮播事件在轮播自身上触发（即，在<div class="carousel">上面触发）。

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})