轮播

用于图片元素、幻灯片或包含文本的轮播元件。

如何运作

轮播是一个幻灯片,是使用 CSS 3D 的变形转换和一些 JavaScript 构建一系列内容产生的轮回播放。它适用于一系列图像、文本或自定义标记。它还包括对上一个 / 下一个控制项和指示器的支持。

在支持页面可见性 API 的浏览器中,当网页对用户不可见时,轮播将避免滑动(例如浏览器分页不是启动状态或浏览器视窗最小化等)。

请注意,不支持嵌套轮播,而轮播通常不符合无障碍标准。

最后,如果你要自行编译 JS,记得 requires util.js

实例

轮播不会自动使幻灯片尺寸标准化。因此,你可能需要使用其它通用类别或自定义样式来调整成适当内容大小。虽然轮播支持上一个/下一个控制项和指示器,但是它们不是必备项目。可根据你的需要添加和自定义。

需要将 .active 添加到其中一个轮播元素上 否则轮播将不可见。另外一定要在 .carousel 上为控制项组件设置一个唯一的 id,特别是如果你在一个页面上使用多个轮播。控制项和指示器元素必须具有与 .carousel 元素的 data-target 须与 id 的属性匹配(或者是有链接的 href)

只有幻灯片

这是一个只有幻灯片的轮播。 请注意在轮播图像上存在 .d-block.w-100 属性以修正浏览器预设的图像对齐。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

包含控制项

加入向前及向后的控制项:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

包含指示器

你还可以将指示器与控制项一起添加到轮播中。

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

包含字幕

.carousel-item 中使用 .carousel-caption 添加字幕到你的幻灯片。 它们会隐藏在较小的 viewport 上,如下所示,可用的显示工具。 我们最初用.d-none 隐藏它们,并将它们显示在中型的设置上 (使用 .d-md-block)。

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

交叉淡入淡出

.carousel-fade 加到轮播中,以使用淡入淡出的取代滑动的动画效果。

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

用法

通过 data 属性

使用 data 属性可以轻松控制轮播的位置。 data-slide 接受 prevnext 的关键字, 它们相对于当前位置进而改变幻灯片位置。或者,使用 data-slide-to 将原始幻灯片索引转换到 data-slide-to="2",将幻灯片位置移动到以 0 开头的特定索引。

The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.

通过 JavaScript

通过以下方法使用轮播:

$('.carousel').carousel()

选项

可以通过 data 属性或 JavaScript 调整选项。对于 data 属性,将选项名称附加到 data-,如 data-interval=""

名称 类别 默认 描述
interval number 5000 一个项目自动轮回之间延迟的时间。 如果为 false ,轮播不会自动重播。
数值 boolean true 轮播是否对于键盘事件有反应。
pause string | boolean "hover"

如果设置为 "hover", 轮播会因为 mouseenter 而暂停并在 mouseleave 时再度执行。如果设置 false,滑入时将不会停止轮播。

在触控装置上 "hover"。在重播恢复之前,轮播将停止于 touchend (直到用户与轮播的互动) 两次之间的期间。注意,这是除了滑鼠行为以外。

ride string false 用户手动播放第一个后自动轮播。如果是 "carousel" 在轮播载入后自动播放。
wrap boolean true 轮播是否应该连续循环或停止。

方法

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

.carousel(options)

初始化通过 object 设定并开始执行轮播。.

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

.carousel('cycle')

从左到右循环播放。

.carousel('pause')

将物件的循环从轮播中停止

.carousel(number)

将轮播指向到特定的影格(基于 0,类似于阵列)。 在目标项目被显示之前回传给调用者 (在发生 slid.bs.carousel 事件之前)。

.carousel('prev')

将轮播指向前一个物件。 在前一个物件显示前回传给调用者 (在发生 slid.bs.carousel 事件之前)。

.carousel('next')

将轮播指向下一个物件。 在前一个物件显示前回传给调用者 (在发生 slid.bs.carousel 事件之前)。

.carousel('dispose')

销毁一个元素的轮播

事件

Bootstrap 提供了两个事件给予轮播使用。 两个事件都具有以下附加属性:

所有轮播事件都在轮播本身(即 <div class="carousel">)下被触发。

事件类型 描述
slide.bs.carousel 当调用 slide 方法时,此事件会立即触发。
slid.bs.carousel 轮播完成切换后,此事件就被触发。
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

改变转换速率

如果你使用自行编译的 CSS,则可以调整 $carousel-transitionSass 变数来改变转换的速率。如果使用多个转换效果,请确保 transform 的效果是优先定义的 (例如: transition: transform 2s ease, opacity .5s ease-out).