站长百科 | 数字化技能提升教程 数字化时代生存宝典 
轮播（Carousel）是Bootstrap中的一个幻灯片放映组件，用于在元素、图像或文本幻灯片之间循环播放，类似于旋转木马的效果。它由一个class为“carousel”的容器定义，其中包含轮播指示器、轮播内容以及轮播的控制按钮。
一、运作方式
轮播是一个幻灯片，用于循环浏览一系列内容，使用 CSS 3D 转换和一些 JavaScript 构建。它适用于一系列图像、文本或自定义标记。它还包括对上一个/下一个控件和指示器的支持。
在支持页面可见性 API 的浏览器中，当网页对用户不可见时（例如，当浏览器选项卡处于非活动状态、浏览器窗口最小化等时），轮播将避免滑动。
注意：
- 不支持嵌套轮播界面，并且轮播界面通常不符合无障碍标准；
- 如果从源代码构建我们的JavaScript，它需要util.js。
Bootstrap的轮播组件不会自动调整幻灯片尺寸，因此可能需要使用其他工具或自定义样式来适当调整内容大小。虽然轮播支持上一个/下一个控件和指示器，但它们并不是必需的，可以根据需要添加和自定义。
为了确保轮播可见，需要将 .active 类添加到其中一张幻灯片中。此外，在多个轮播界面的情况下，请务必在可选控件上设置唯一控件id，以确保正确控制每个轮播。控件和指示器元素必须具有与元素匹配的属性（或链接），例如：id.carousel、data-target、href等。
二、仅幻灯片
这是一个只有幻灯片的轮播。请注意，在轮播图像上是否存在 and 类，以防止浏览器默认对齐图像。同时，请确保使用 d-block 和 w-100 类来设置图像的块级显示和宽度为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-caption和.carousel-item），它们可以很容易地在较小的视口上隐藏，例如通过设置display: none;。然后，当视口宽度达到中等尺寸（如中号设备）时，可以使用可选的显示实用程序将它们显示出来，例如通过设置display: 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和.carousel-item添加或自定义一些CSS样式。
<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属性。
<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>
八、禁用触摸滑动
要禁用轮播在触摸屏设备上向左/向右滑动以在幻灯片之间移动的功能，可以在.carousel-item元素上添加data-toucheswipe属性并将其值设置为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>
九、轮播用法
1、通过数据属性
使用数据属性，可以轻松地控制轮播的位置。可以使用关键词“prev”或“next”来相对于当前位置更改幻灯片的位置，也可以使用“to”属性将特定的幻灯片索引传递给轮播，以将幻灯片移动到指定的位置。
另外，通过在轮播元素上设置“data-ride="carousel"”属性，可以标记它为在页面加载时自动开始动画效果。如果不使用此属性来初始化轮播，则需要手动初始化轮播组件。请注意，不应该在同一个轮播组件上同时使用冗余和不必要的显式JavaScript初始化代码。
2、通过JavaScript
使用以下命令手动调用轮播：
$('.carousel').carousel()
3、选项
选项可以通过数据属性或 JavaScript 传递。对于数据属性，只需将选项名称追加到"data-"中，就像这样：data-interval="5000"。
4、方法
- .carousel(options)：使用object可选选项初始化轮播，并开始循环浏览项目。
$('.carousel').carousel({
interval: 2000
})
- .carousel('cycle')：从左到右循环浏览轮播项目。
- .carousel('pause')：阻止轮播在项目之间循环播放。
- .carousel(number)：将轮播循环到特定帧slid.bs.carousel（从 0 开始，类似于数组）。在显示目标项之前（即在事件发生之前）返回给调用方。
- .carousel('prev')：循环到上一项。在显示上一项之前slid.bs.carousel（即在事件发生之前）返回给调用方。
- .carousel('next')：循环到下一项。在显示下一项之前slid.bs.carousel（即在事件发生之前）返回给调用方。
- .carousel('dispose')：破坏元素的轮播。
- .carousel('nextWhenVisible')：当页面不可见或轮播界面或其父级不可见时，请勿将轮播界面循环到下一个页面。在显示下一项之前slid.bs.carousel（即在事件发生之前）返回给调用方。
- .carousel('to')：将轮播循环到特定帧（从 0 开始，类似于数组）。在显示下一项之前slid.bs.carousel（即在事件发生之前）返回给调用方。
5、事件
Bootstrap 的轮播类公开了两个事件，用于挂接到轮播功能。这两个事件都具有以下附加属性：
- direction：轮播的滑动方向"left"（或 ）"right"；
- relatedTarget：作为活动项滑入到位的 DOM 元素；
- from：当前项目的索引；
- to：下一项的索引。
所有轮播事件都是在轮播本身（即 ）<div class="carousel">触发的。
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
十、更改过渡持续时间
在编译之前，可以使用Sass变量来更改过渡持续时间。如果使用已编译的CSS，则可以使用自定义样式来更改过渡持续时间。如果应用了多个转换，请确保首先定义转换（例如：.carousel-item）以便设置过渡效果，如下所示：
.carousel-item {
&.carousel-transition {
transition: transform 2s ease, opacity .5s ease-out;
}
}
这段代码中使用了Sass的嵌套语法，通过&符号表示对父选择器的引用，从而定义了带有.carousel-transition类的.carousel-item元素的过渡效果。
