Bootstrap 4 JS 轮播
轮播 CSS 类
有关轮播的教程，请阅读我们的 Bootstrap 轮播教程.
| 类 | 描述 |
|---|---|
.carousel |
创建一个轮播 |
.carousel-indicators |
为轮播添加指示器。这些指示器是每个幻灯片底部的小点（用于指示轮播中共有多少幻灯片以及用户当前正在查看的幻灯片） |
.carousel-inner |
为轮播添加幻灯片 |
.carousel-item |
指定每个幻灯片的内容 |
.carousel-control-prev |
为轮播添加一个左（上一个）按钮，允许用户在幻灯片之间后退 |
.carousel-control-next |
为轮播添加一个右（下一个）按钮，允许用户在幻灯片之间前进 |
.carousel-control-prev-icon |
与 .carousel-control-prev 一起使用，以创建一个“上一个”按钮 |
.carousel-control-next-icon |
与 .carousel-control-next 一起使用，以创建一个“下一个”按钮 |
.carousel-caption |
为轮播指定一个标题 |
.slide |
从一个项目滑到下一个项目时，添加 CSS 过渡和动画效果。如果您不希望此效果，请删除此类 |
通过 data-* 属性
使用 data-ride="carousel" 属性激活轮播。
使用 data-slide 和 data-slide-to 属性指定要转到的幻灯片。
使用 data-slide 属性接受两个值：prev 或 next，而 data-slide-to 接受数字。
示例
<!-- 轮播 -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 轮播指示器 -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!-- 轮播控件 -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
亲自尝试 »
通过 JavaScript
手动启用
示例
// 激活轮播
$("#myCarousel").carousel();
// 启用轮播指示器
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// 启用轮播控件
$(".carousel-control-prev").click(function(){
$("#myCarousel").carousel("prev");
});
亲自尝试 »
轮播选项
选项可以通过 data 属性或 JavaScript 传递。对于 data 属性，将选项名称附加到 data-，如 data-interval=""。
| 名称 | 类型 | 默认值 | 描述 | 尝试 |
|---|---|---|---|---|
| interval | 数字，或布尔值 false | 5000 | 指定每个幻灯片之间的延迟（以毫秒为单位）。 注意：将 interval 设置为 false 以停止项目自动滑动 |
使用 JS 使用 data |
| keyboard | 布尔值 | true | 指定轮播是否应该对键盘事件做出反应
|
使用 JS 使用 data |
| pause | 字符串，或布尔值 false | "hover" | 当鼠标指针进入轮播时，暂停轮播继续滑到下一个幻灯片，当鼠标指针离开轮播时，恢复滑动 注意：将 pause 设置为 false 以停止悬停时暂停功能 |
使用 JS 使用 data |
| wrap | 布尔值 | true | 指定轮播是否应该连续地滑过所有幻灯片，或者在最后一页停止
|
使用 JS 使用 data |
轮播方法
下表列出了所有可用的轮播方法。
| 方法 | 描述 | 尝试 |
|---|---|---|
| .carousel(options) | 使用选项激活轮播。有关有效值，请参阅上面的选项 | 尝试 |
| .carousel("cycle") | 从左到右滑过轮播项目 | 尝试 |
| .carousel("pause") | 停止轮播滑过项目 | 尝试 |
| .carousel(number) | 转到指定项目（从零开始：第一个项目为 0，第二个项目为 1，等等。） | 尝试 |
| .carousel("prev") | 转到上一个项目 | 尝试 |
| .carousel("next") | 转到下一个项目 | 尝试 |
| .carousel("dispose") | 销毁轮播 |
轮播事件
下表列出了所有可用的轮播事件。
| 事件 | 描述 | 尝试 |
|---|---|---|
| slide.bs.carousel | 当轮播即将从一个项目滑到另一个项目时发生 | 尝试 |
| slid.bs.carousel | 当轮播完成从一个项目滑到另一个项目时发生 | 尝试 |
slid 和 slide 事件也具有其他属性
| 属性 | 描述 | 尝试 |
|---|---|---|
| direction | 返回轮播滑动的方向（左或右） | |
| relatedTarget | 返回正在滑到位的 DOM 元素，作为活动项目 | 尝试 |
| from | 返回上一个项目来自的位置索引，在移动到下一个项目时 | 尝试 |
| to | 返回下一个项目的索引 | 尝试 |
