当前位置：首页 > news >正文

【Bootstrap V4系列】学习入门教程之组件-轮播（Carousel）高级用法

news 来源：原创 2025/8/18 4:57:07

【Bootstrap V4系列】学习入门教程之组件-轮播（Carousel）高级用法

轮播（Carousel）高级用法
- 2.5 Crossfade （淡入淡出）
- 2.6 Individual .carousel-item interval （单个轮播项目间隔）
- 2.7 Disable touch swiping（禁用触摸滑动）
Usage
- Via data attributes（通过数据属性）
- Via JavaScript（通过JavaScript）
- Options （选项）
- Methods （方法）
- Events （事件）

轮播（Carousel）高级用法

2.5 Crossfade （淡入淡出）

向您的旋转木马添加.carousel-fade淡入淡出，以使用淡入淡出过渡而不是幻灯片来制作幻灯片动画。根据您的轮播内容（例如，纯文本幻灯片），您可能需要在.carousel-items 轮播项目中添加.bg-body 正文或一些自定义CSS，以进行适当的交叉缩放。

<!--淡入淡出 Crossfade-->
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="../images/1.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="../images/2.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="../images/a1.jpg" 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>

页面展示效果：

在这里插入图片描述

2.6 Individual .carousel-item interval （单个轮播项目间隔）

将data-interval=""数据间隔添加到.carousel-item项目，以更改自动循环到下一个项目之间的延迟时间。

<!-- Individual .carousel-item interval 单个轮播项目间隔-->
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active" data-interval="10000"><img src="../images/1.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item" data-interval="2000"><img src="../images/2.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="../images/a1.jpg" 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>

页面展示效果：

在这里插入图片描述

2.7 Disable touch swiping（禁用触摸滑动）

旋转木马支持在触摸屏设备上左右滑动，以在幻灯片之间移动。可以使用data-touch 数据触摸属性禁用此功能。下面的示例也不包括data-ride 数据骑行属性，并且data-interval="false" 数据间隔为“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>

页面展示效果：

在这里插入图片描述

Usage

Via data attributes（通过数据属性）

使用数据属性轻松控制转盘的位置。. data-slide数据幻灯片接受关键字prev或next，这会改变幻灯片相对于其当前位置的位置。

data-ride="carousel"属性用于将轮播标记为从页面加载开始的动画。如果你不使用data-ride="carousel" 来初始化你的轮播，你必须自己初始化它。它不能与同一转盘的（冗余和不必要的）显式JavaScript初始化结合使用。

Via JavaScript（通过JavaScript）

使用以下命令手动调用转盘：

$('.carousel').carousel()

Options （选项）

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

Name	Type	Default	Description
interval	number	5000	自动循环项目之间的延迟时间。如果为false，转盘将不会自动循环。
keyboard	boolean	true	转盘是否应对键盘事件做出反应。
pause	string / boolean	‘hover’	如果设置为“悬停”，则暂停鼠标输入上转盘的循环，并恢复鼠标离开上转盘的旋转。如果设置为false，将鼠标悬停在旋转木马上不会暂停它。
–	–	–	----

Methods （方法）

.carousel(options)
使用可选选项对象初始化转盘，并开始循环浏览项目。

$('.carousel').carousel({interval: 2000
})

.carousel('cycle')
从左到右循环浏览旋转木马项目。

.carousel('pause')
阻止转盘在项目间循环。

应用案例：

HML

<!--带控制装置 With controls-->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="../images/1.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="../images/2.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="../images/a1.jpg" 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 style="text-align: center;margin-top: 30px;"><input type="button"  id="btn_stop" value="点击暂停"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button"  id="btn_continue" value="点击继续">
</div>

JavaScript

<script type="text/javascript">//轮播时间间隔设置为2s$('.carousel').carousel({interval: 2000});//点击暂停按钮，轮播将停止$('#btn_stop').click(function () {$('.carousel').carousel('dispose');});//点击继续按钮，轮播将继续$('#btn_continue').click(function () {$('.carousel').carousel('cycle');});</script>

页面展示效果：

在这里插入图片描述

Events （事件）

Bootstrap的轮播类公开了两个事件，用于连接轮播功能。这两个事件都具有以下附加属性：

direction 方向：转盘滑动的方向（“左”或“右”）。
relatedTarget：作为活动项滑入到位的DOM元素。
from：当前项目的索引
to：下一项的索引

所有轮播事件都是在轮播本身（即<div class="carousel">）触发的。

Event Type	Description
slide.bs.carousel	当调用slide实例方法时，此事件会立即触发。
slid.bs.carousel	当旋转木马完成幻灯片转换时，此事件会被触发。

$('#myCarousel').on('slide.bs.carousel', function () {// do something...
})

【Bootstrap V4系列】学习入门教程之 组件-轮播（Carousel）高级用法

轮播（Carousel）高级用法

2.5 Crossfade （淡入淡出）

2.6 Individual .carousel-item interval （单个轮播项目间隔）

2.7 Disable touch swiping（禁用触摸滑动）

Usage

Via data attributes（通过数据属性）

Via JavaScript（通过JavaScript）

Options （选项）

Methods （方法）

Events （事件）

相关文章：

【Bootstrap V4系列】学习入门教程之组件-轮播（Carousel）高级用法