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

怎么运行的

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

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

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

$('.carousel').carousel()

选项

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

方法

异步方法和转换

所有 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">）发射。

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