轮播效果(Carousel)

这是一个循环滚动的幻灯片组件，可以使用文本、图象水平不间断滚动，如同旋转木马一般。

工作原理

轮播效果是一个幻灯片效果，使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放，它适用于一系列图像、文本或自定义标记，还包括对上一个/下一个图的浏览控制和指令支持。

在支持 Page Visibility API（页面可见性）的浏览器中，当网页对用户不可见时（如浏览器选项卡处于非活动状态、窗口最小化时），轮播效果控件会停止运动，从而节省性能。

轮播组件不支持互相嵌套-本身轮播大多不符合无障碍浏览的标准。

最后，如果你要自行编译构建JS，记得 需要 util.js。

示例

轮播不带幻灯片尺寸标准化处理，因此你可能需要使用其它通用样式可自定义样式来调整其大小使之适当匹配。虽然轮播组件支持上一个/下一个控制和指令，但它们不是必备元素，可根据你的需要添加或自定义（展现不同的效果）。

通过 .carousel 命名样式引入轮播组件，同时为此控件设置唯的ID-尤其是当你在同一页面使用多个轮播效果时这是必须的。

经典幻灯片效果

这是一个经典的幻灯片示例，请注意轮播上的图像引用了 .d-block 、 .img-fluid两个样式，以修正浏览器预设的图像对齐带来的影响。

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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>

需要定义有效的初始状态元素

将 .active 样式添加到其中一个幻灯片（一般第一张），否则轮播效果将无法正常运行（展现）。

包含字幕的轮播

在 .carousel-item 中使用 .carousel-caption 添加字幕到您的轮播控件中，如果是输小的浏览器viewport上，会自动隐藏（隐藏文字呈现主图片轮播），引用的是.d-none定义，一旦到了中型md浏览设备或屏幕则调用.d-md-block样式使之呈现。

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

用法

通过数据属性

使用数据属性可以轻松控制转盘的位置。data-slide接受关键字， prev或者 next改变相对于其当前位置的滑动位置。或者，使用data-slide-to将原始幻灯片索引传递到data-slide-to="2"，将幻灯片位置转换到以0开始的特定索引。

该data-ride="carousel" 属性用于将轮播标记为从页面加载开始的动画，它不能与同一转盘的（冗余和不必要）显式JavaScript初始化结合使用。

通过JavaScript

通过下面方法使用JS控制轮播：

$('.carousel').carousel()

选项

可以透過資料屬性或 JavaScript 調整選項。對於資料屬性，將選項名稱附加到 data-，如 data-interval=""。 可以通过数据属性或JavaScript调整（传递）选项，对于数据属性，选项名称追加到data-，如data-interval=""。

名称 Type类型 默认值 描述
interval number 5000 自动循环项目之间的延迟时间（即滚动时间），。果为false，则传送带不会滚动。
keyboard boolean true 旋转木马是否应对键盘事件作出反应。
pause string | boolean "hover"

悬停控制-注意移动平台的配置。If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.

On touch-enabled devices, when set to "hover", cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.
ride string false 在用户手动循环第一个项目后自动播放传送带， 如果“carousel”则加载时自动播放传送带。
wrap boolean true 转盘是否应该连续循环或难以停止。

方法

异步传输和转换

所有API都支持 异步传输 和轮换。一旦转换事件发生（开始），直到 事件结束之前不会结束。另外，在 过渡组件上的方法将被忽略。

请参阅我们的API文档了解更多。

.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提供了两下事件给轮播控件使用，这两个事件都具有以下附加属性：

  • direction: 轮播滚动的方向 ( "left" 或 "right")。
  • relatedTarget: 作为活动项目滑动到指定的DOM元素。
  • from: 当前项目的项目的索引。
  • to:下一个项目的索引。

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

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