轮播
一个幻灯片组件，用于循环浏览元素（图像或文本幻灯片），就像轮播一样。
工作原理
轮播是一个幻灯片，用于循环播放一系列内容，它使用 CSS 3D 变换和一些 JavaScript 构建。它适用于一系列图像、文本或自定义标记。它还包括对上一个/下一个控件和指示器的支持。
在支持 页面可见性 API 的浏览器中，当用户不可见网页时（例如，当浏览器选项卡处于非活动状态、浏览器窗口最小化等），轮播将避免滑动。
prefers-reduced-motion 媒体查询。请参阅 无障碍文档的减少动作部分。
请注意，不支持嵌套轮播，并且轮播通常不符合无障碍标准。
最后，如果您要从源代码构建我们的 JavaScript，它需要 util.js。
示例
轮播不会自动规范幻灯片尺寸。因此，您可能需要使用其他实用程序或自定义样式来适当调整内容大小。虽然轮播支持上一个/下一个控件和指示器，但它们并不是明确必需的。根据需要添加和自定义。
需要将 .active 类添加到其中一个幻灯片，否则轮播将不可见。另外，请务必为 .carousel 设置一个唯一的 id 以用于可选控件，特别是如果您在单个页面上使用多个轮播时。控件和指示器元素必须具有 data-target 属性（或链接的 href），该属性与 .carousel 元素的 id 相匹配。
仅幻灯片
这是一个仅包含幻灯片的轮播。请注意轮播图像上存在 .d-block 和 .w-100，以防止浏览器默认图像对齐。
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>带控件
添加上一个和下一个控件。我们建议使用 <button> 元素，但您也可以使用 <a> 元素和 role="button"。
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</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 src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>带标题
使用任何 .carousel-item 中的 .carousel-caption 元素轻松为幻灯片添加标题。它们可以轻松隐藏在较小的视口中，如下所示，并带有可选的 显示实用程序。我们最初使用 .d-none 隐藏它们，并使用 .d-md-block 在中型设备上重新显示它们。
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>交叉淡化
将 .carousel-fade 添加到旋转木马中，以使用淡入淡出过渡而不是滑动来为幻灯片添加动画效果。根据旋转木马的内容（例如，仅文本幻灯片），你可能需要将 .bg-body 或一些自定义 CSS 添加到 .carousel-item 中，以便正确地交叉淡化。
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>单个 .carousel-item 间隔
将 data-interval="" 添加到 .carousel-item 中，以更改在自动循环到下一项之前延迟的时间量。
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>禁用触控滑动
旋转木马支持在触摸屏设备上向左/向右滑动以在幻灯片之间移动。可以使用 data-touch 属性禁用此功能。下面的示例也不包含 data-ride 属性，并且具有 data-interval="false"，因此它不会自动播放。
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>用法
通过数据属性
使用数据属性轻松控制旋转木马的位置。data-slide 接受关键字 prev 或 next，它们会相对于当前位置改变幻灯片的位置。或者，使用 data-slide-to 将原始幻灯片索引传递给旋转木马 data-slide-to="2"，它会将幻灯片位置移动到从 0 开始的特定索引。
data-ride="carousel" 属性用于标记旋转木马，使其在页面加载时开始播放动画。如果你不使用 data-ride="carousel" 来初始化旋转木马，则必须自己初始化它。它不能与相同旋转木马的（冗余且不必要的）显式 JavaScript 初始化结合使用。
通过 JavaScript
使用手动调用旋转木马
$('.carousel').carousel()
选项
可以通过数据属性或 JavaScript 传递选项。对于数据属性，将选项名称附加到 data-，如 data-interval=""。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| interval | 数字 | 5000 | 在自动循环一项之前延迟的时间量。如果为 false，旋转木马将不会自动循环。 |
| keyboard | 布尔值 | true | 旋转木马是否应该对键盘事件做出反应。 |
| pause | 字符串 | 布尔值 | 'hover' | 如果设置为 在启用触摸的设备上，当设置为 |
| ride | 字符串 | false | 在用户手动循环第一项后自动播放旋转木马。如果设置为 'carousel'，则在加载时自动播放旋转木马。 |
| wrap | 布尔值 | true | 旋转木马是否应该连续循环或硬停止。 |
| touch | 布尔值 | true | 旋转木马是否应该支持触摸屏设备上的向左/向右滑动交互。 |
方法
异步方法和转换
所有 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')
销毁元素的轮播。
.carousel('nextWhenVisible')
当页面不可见或轮播或其父元素不可见时，不要将轮播循环到下一个项目。在下一个项目显示之前返回给调用者（即在 slid.bs.carousel 事件发生之前）。
.carousel('to')
将轮播循环到特定帧（从 0 开始，类似于数组）。在下一个项目显示之前返回给调用者（即在 slid.bs.carousel 事件发生之前）。
事件
Bootstrap 的轮播类公开了两个事件，用于连接到轮播功能。两个事件都具有以下附加属性
direction：轮播滑动方向（"left"或"right"）。relatedTarget：作为活动项目滑入的 DOM 元素。from：当前项目的索引to：下一个项目的索引
所有轮播事件都在轮播本身触发（即在 <div class="carousel"> 中）。
| 事件类型 | 描述 |
|---|---|
| slide.bs.carousel | 当调用 slide 实例方法时，此事件会立即触发。 |
| slid.bs.carousel | 当轮播完成其滑动过渡时，触发此事件。 |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
更改过渡持续时间
如果使用已编译的 CSS，则可以在编译之前使用 $carousel-transition Sass 变量或自定义样式来更改 .carousel-item 的过渡持续时间。如果应用了多个过渡，请确保首先定义转换过渡（例如 transition: transform 2s ease, opacity .5s ease-out）。