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 接受数字。
示例
<!-- Carousel -->
<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 | number，或布尔值 false | 5000 | 指定每张幻灯片之间的延迟（以毫秒为单位）。 注意：将 interval 设置为 false 可停止幻灯片自动播放 |
使用 JS 使用 data |
| 键盘 | boolean | true | 指定轮播图是否响应键盘事件
|
使用 JS 使用 data |
| pause | 字符串，或布尔值 false | "hover" | 当鼠标指针进入轮播图时，暂停轮播图自动播放下一张幻灯片，当鼠标指针离开轮播图时恢复播放 注意：将 pause 设置为 false 可停止悬停暂停功能 |
使用 JS 使用 data |
| wrap（换行） | boolean | 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 | 返回下一项的索引 | 试一试 |
