Bootstrap 4 JS 轮播

轮播 CSS 类

有关轮播的教程,请阅读我们的 Bootstrap Carousel 轮播教程。

描述
.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 and data-slide-to 属性指定要转到哪张幻灯片。

data-slide 属性接受两个值:prevnext,而 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");
});
亲自试一试 »

轮播选项

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

名称 类型 默认值 描述 试一试
interval 数字,或布尔值 false 5000 指定每张幻灯片之间的延迟(以毫秒为单位)。

注释: 将间隔设置为 false 以阻止项目自动滑动
Using JS Using data
keyboard boolean true 指定轮播是否应对键盘事件做出反应:

  • true - 可以使用键盘左右箭头导航轮播(下一个和上一个)
  • false - 无法使用键盘左右箭头导航轮播
Using JS Using data
pause 字符串,或布尔值 false "hover" 当鼠标指针进入轮播时暂停轮播通过下一张幻灯片,当鼠标指针离开轮播时恢复滑动

注释: 将 pause 设置为 false 以停止在悬停时暂停的功能
Using JS Using data
wrap boolean true 指定轮播是连续浏览所有幻灯片,还是在最后一张幻灯片处停止

  • true - 连续循环
  • false - 停在最后一项
Using JS Using data

轮播方法

下表列出了所有可用的轮播方法。

方法 描述 试一试
.carousel(options) 使用选项激活轮播。请参阅上面的选项以获取有效值 测试一下
.carousel("cycle") 从左到右遍历轮播项目 测试一下
.carousel("pause") 停止轮播通过项目 测试一下
.carousel(number) 转到指定项目(从零开始:第一项为 0,第二项为 1,等等。) 测试一下
.carousel("prev") 转到上一个项目 测试一下
.carousel("next") 转到下一个项目 测试一下
.carousel("dispose") 摧毁一个轮播

轮播事件

下表列出了所有可用的轮播事件。

事件 描述 试一试
slide.bs.carousel 当轮播即将从一个项目滑到另一个项目时发生 测试一下
slid.bs.carousel 当轮播完成从一个项目滑到另一个项目时发生 测试一下

幻灯片和幻灯片事件还具有其他属性:

属性 描述 试一试
direction 返回轮播的滑动方向(左或右)
relatedTarget 返回作为活动项滑入到位的 DOM 元素 测试一下
from 返回上一个项目的来源的索引,当移动到下一个时 测试一下
to 返回下一项的索引 测试一下