轮播 | Carousel

幻灯片组件，用于循环浏览元素 - 文本的图像或幻灯片 - 如旋转木马。

怎么运行的

该轮播是一个幻灯片循环浏览一系列内容，使用 CSS 3D 转换和一些 JavaScrip t构建。它适用于一系列图像，文本或自定义标记。它还包括对前一个/下一个控件和指标的支持。

在支持页面可见性 API 的浏览器中，当网页对用户不可见时（例如，当浏览器选项卡处于非活动状态，浏览器窗口被最小化等）时，传送带将避免滑动。

请注意，嵌套传送带不受支持，传送带通常不符合辅助功能标准。

最后，如果你从源代码构建我们的 JS，它需要util.js。

示例

传送带不会自动标准化幻灯片尺寸。因此，您可能需要使用其他实用程序或自定义样式来适当调整内容大小。虽然传送带支持上一个/下一个控件和指示符，但它们不是明确需要的。如您所见，添加并自定义。

请务必在.carousel可选控件上设置唯一的 ID ，特别是在单个页面上使用多个轮播时。

仅限幻灯片

这是一个只有幻灯片的旋转木马。请注意传送带图像.d-block和.img-fluid传送带图像的存在，以防止浏览器默认图像对齐。

在 getbootstrap.com 上打开示例

<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>

带有（使用）控件

在上一个和下一个控件中添加：

在 getbootstrap.com 上打开示例

<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>

带有（使用）指标

您也可以将指标添加到圆盘传送带上，并与控件一起添加。

在 getbootstrap.com 上打开示例

<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-caption任何内容中的元素轻松为您的幻灯片添加标题.carousel-item。它们可以很容易地隐藏在较小的视口中，如下所示，带有可选的显示实用程序。我们最初.d-none将它们隐藏起来，并使用.d-md-block将它们带回到中型设备上。

在 getbootstrap.com 上打开示例

<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

通过以下方式手动调用轮播：

$('.carousel').carousel()

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，请将选项名称附加到中data-，如data-interval=""。

Name	类型	默认	描述
interval	数	5000	自动循环项目之间的延迟时间。如果为false，传送带将不会自动循环。
keyboard	布尔	真	旋转木马是否应对键盘事件作出反应。
pause	字符串\| 布尔	“徘徊”("hover")	如果设置为“悬停”，则暂停 mouseenter 上的传送带循环并在鼠标离开时恢复传送带循环。如果设置为 false，则悬停在旋转木马上不会暂停。在启用了触摸的设备上，如果设置为“悬停”，则在自动恢复之前，骑行者会在触摸屏上暂停（一旦用户完成与传送带的交互）两个时间间隔。请注意，这是上述鼠标行为的补充。
ride	串	假	在用户手动循环第一个项目后自动播放传送带。如果“传送带”在加载时自动播放传送带。
wrap	布尔	真	转盘是否应该连续循环或难以停止。

方法

异步方法和转换

所有 API 方法都是异步的并开始转换。一旦转换开始但在结束之前，它们就立即返回给调用者。另外，对转换组件的方法调用将被忽略。

查看我们的 JavaScript 文档以获取更多信息。

`.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">）发射。

事件类型	描述
slide.bs.carousel	此事件在调用幻灯片实例方法时立即触发。
slid.bs.carousel	旋转木马完成幻灯片切换时会触发此事件。

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

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2018-09-28