轮播

用于循环播放元素（图像或文本幻灯片）的幻灯片组件，如轮播。

它是怎么工作的

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

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

该组件的动画效果依赖于 prefers-reduced-motion 媒体查询。

请注意，不支持嵌套轮播，并且轮播通常不符合可访问性标准。

示例

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

.active 类需要添加到其中一张幻灯片，否则轮播将不可见。 此外，请务必在 .carousel 上为可选控件设置唯一的 id，尤其是当您在单个页面上使用多个轮播时。 控件和指示器元素必须具有与 的 id 匹配的 data-bs-target 属性（或链接的 href）。 轮播 元素。

仅幻灯片

这是一个只有幻灯片的旋转木马。 请注意轮播图像上存在 .d-block 和 .w-100 以防止浏览器默认图像对齐。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="images/gallery/1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="images/gallery/2.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="images/gallery/3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
</div>
带控件

添加上一个和下一个控件。 我们建议使用 <button> 元素，但您也可以将 <a> 元素与 role="button> 一起使用。

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="images/gallery/4.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="images/gallery/5.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="images/gallery/6.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">前</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">后</span>
  </button>
</div>
有指标

您还可以将指示器与控件一起添加到轮播中。

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="images/gallery/7.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="images/gallery/8.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="images/gallery/9.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">前</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">后</span>
  </button>
</div>
带字幕

使用任何 .carousel-item 中的 .carousel-caption 元素轻松为幻灯片添加标题。 它们可以通过可选的显示实用程序轻松隐藏在较小的视口中，如下所示。 我们最初使用 .d-none 隐藏它们，然后使用 .d-md-block 将它们带回中型设备。

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="images/gallery/10.jpg" class="d-block w-100" alt="...">

      <div class="carousel-caption d-none d-md-block">
        <h5>桃花传奇</h5>
        <p>主要讲述了主人公楚留香爱恨纠缠的感情故事。</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="images/gallery/1.jpg" class="d-block w-100" alt="...">

      <div class="carousel-caption d-none d-md-block">
        <h5>午夜兰花</h5>
        <p>兰花先生。半夜种兰花的人。清淡绝然的白色。若有若无的香气。</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="images/gallery/2.jpg" class="d-block w-100" alt="...">

      <div class="carousel-caption d-none d-md-block">
        <h5>蝙蝠传奇</h5>
        <p>楚留香和胡铁花等好友来到蝙蝠岛的故事。</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">前</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">后</span>
  </button>
</div>
淡入淡出

将 .carousel-fade 添加到轮播中，以使用淡入淡出过渡而不是幻灯片为幻灯片制作动画。 根据您的轮播内容（例如，纯文本幻灯片），您可能希望将 .bg-body 或一些自定义 CSS 添加到 .carousel-item 以进行正确的交叉淡入淡出。

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="images/gallery/3.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="images/gallery/4.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="images/gallery/5.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">前</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">后</span>
  </button>
</div>
单个 .carousel-item 间隔

将 data-bs-interval=""" 添加到 .carousel-item 以更改自动循环到下一个项目之间的延迟时间。

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="images/gallery/6.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="images/gallery/7.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="images/gallery/8.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">前</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">后</span>
  </button>
</div>
禁用触摸滑动

轮播支持在触摸屏设备上向左/向右滑动以在幻灯片之间移动。 这可以使用 data-bs-touch 属性禁用。 下面的示例也不包含 data-bs-ride 属性，并且具有 data-bs-interval=“false”，因此它不会自动播放。

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="images/gallery/9.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="images/gallery/10.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="images/gallery/1.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">前</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">后</span>
  </button>
</div>
深色变体

将 .carousel-dark 添加到 .carousel 以获得更暗的控件、指示器和标题。 控件已使用 filter CSS 属性从其默认的白色填充反转。 标题和控件具有自定义 color 和 background-color 的附加 Sass 变量。

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="images/gallery/2.jpg" class="d-block w-100" alt="...">

      <div class="carousel-caption d-none d-md-block">
        <h5>新月传奇</h5>
        <p>主要讲述了楚留香寻找新月公主为证清白的故事。</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="images/gallery/3.jpg" class="d-block w-100" alt="...">

      <div class="carousel-caption d-none d-md-block">
        <h5>鬼恋侠情</h5>
        <p>讲的是两对武林世家恋人为逃避父母的逼婚，假装彼此之间在大病一场后换了灵魂，以求和相爱的人在一起的事。</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="images/gallery/4.jpg" class="d-block w-100" alt="...">

      <div class="carousel-caption d-none d-md-block">
        <h5>画眉鸟</h5>
        <p>石观音人虽死，她的势力却仍在中原武林苟延残喘，并且由此引出了另一大魔头——水母阴姬...</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">前</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">后</span>
  </button>
</div>
自定义过渡

.carousel-item 的过渡持续时间可以在编译之前使用 $carousel-transition-duration Sass 变量进行更改，或者如果您使用已编译的 CSS，则可以自定义样式。 如果应用了多个转换，请确保首先定义转换转换（例如。transition: transform 2s ease, opacity .5s ease-out）。

用法
通过数据属性

使用数据属性轻松控制轮播的位置。 data-bs-slide 接受关键字 prev 或 next，这会改变相对于当前位置的幻灯片位置。 或者，使用 data-bs-slide-to 将原始幻灯片索引传递给轮播 data-bs-slide-to=“2”，从而移动幻灯片 定位到以 0 开头的特定索引。

data-bs-ride=“carousel” 属性用于将轮播标记为在页面加载时开始动画。 如果你不使用 data-bs-ride=“carousel” 来初始化你的轮播，你必须自己初始化它。 它不能与同一轮播的（冗余和不必要的）显式 JavaScript 初始化结合使用。

通过 JavaScript

手动调用轮播：

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
选项

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

名称 类型 默认 描述
interval number 5000 自动循环项目之间的延迟时间。 如果false，轮播不会自动循环。
keyboard boolean true 轮播是否应对键盘事件做出反应。
pause string | boolean 'hover'

如果设置为 'hover'，则在 mouseenter 上暂停轮播，并在 mouseleave 上继续轮播。 如果设置为 false，将鼠标悬停在轮播上不会暂停它。

在支持触摸的设备上，当设置为 'hover' 时，循环将在 touchend （一旦用户完成与轮播的交互）上暂停两个时间间隔，然后自动恢复。 请注意，这是对上述鼠标行为的补充。
ride string | boolean false 在用户手动循环第一个项目后自动播放轮播。 如果设置为 'carousel'，则在加载时自动播放轮播。
wrap boolean true 转盘是否应连续循环或硬停止。
touch boolean true 轮播是否应支持触摸屏设备上的左/右滑动交互。
方法
异步方法和转换

所有 API 方法都是异步并启动transition。 它们会在过渡开始后但在过渡结束之前返回给调用者。 此外，转换组件上的方法调用将被忽略。

您可以使用 carousel 构造函数创建一个 carousel 实例，例如，使用其他选项进行初始化并开始循环遍历项目：

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})
方法 描述
cycle 从左到右循环浏览轮播项目。
pause 停止轮播在项目中循环。
prev 循环到上一个项目。 在上一个项目显示之前返回给调用者（例如，在 slid.bs.carousel 事件发生之前）。
next 循环到下一个项目。 在显示下一个项目之前返回给调用者（例如，在 slid.bs.carousel 事件发生之前）。
nextWhenVisible 当页面不可见或轮播或其父级不可见时，请勿将轮播循环到下一个。 在显示目标项目之前返回给调用者。
to 将轮播循环到特定帧（基于 0，类似于数组）。 在显示目标项目之前返回给调用者（例如，在 slid.bs.carousel 事件发生之前）。
dispose 销毁元素的轮播。 （删除 DOM 元素上存储的数据）
getInstance 允许您获取与 DOM 元素关联的轮播实例的静态方法，您可以像这样使用它：bootstrap.Carousel.getInstance(element)
getOrCreateInstance 返回与 DOM 元素关联的轮播实例或创建一个新的轮播实例以防它未初始化的静态方法。你可以像这样使用它：bootstrap.Carousel.getOrCreateInstance(element)
事件

Bootstrap 的 carousel 类公开了两个用于连接到 carousel 功能的事件。 这两个事件都具有以下附加属性：

  • direction: 轮播的滑动方向（“left” 或 “right”）。
  • relatedTarget: 作为活动项滑入到位的 DOM 元素。
  • from: 当前项目的索引
  • to: 下一项的索引

所有轮播事件都在轮播本身触发（即在 <div class=“carousel”> 处）。

事件类型 描述
slide.bs.carousel 当调用 slide 实例方法时立即触发。
slid.bs.carousel 当轮播完成幻灯片转换时触发。 
var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})