Bootstrap JavaScript插件：轮播插件 (carousel.js)

最新推荐文章于 2024-08-15 18:01:46 发布

汪末末

最新推荐文章于 2024-08-15 18:01:46 发布

阅读量3k

点赞数 4

分类专栏： # Bootstrap 框架文章标签： bootstrap javascript typescript css html

本文链接：https://blog.csdn.net/WangMinGirl/article/details/108517418

版权

本文详细介绍了Bootstrap的轮播插件（carousel.js）的使用，包括整体结构、轮播指示器、轮播内容和控制按钮的创建。通过data属性和JavaScript调用，可以实现轮播的交互功能，如切换、暂停和播放。同时，讨论了轮播插件的选项和事件，帮助开发者更好地控制和定制轮播效果。

摘要由CSDN通过智能技术生成

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

Bootstrap 的轮播插件（carousel.js）是一个灵活的、响应式的、无缝循环播放的幻灯片切换插件，它的内容可以是图片、视频、或者其他任何内容。

整体结构

Bootstrap中的轮播由一个 class=“carousel” 的容器定义，其中包含轮播指示器、轮播内容、轮播的控制按钮。为了确保在播放时，能够对控制按钮和轮番指示器进行正常定位，需要为容器定义一个 id。

<div id="myBanner" class="carousel" data-ride="carousel">

</div>

1. 轮播指示器

轮播指示器是一个 class=“carousel-indicators” 的有序列表，用来指示轮播的播放状态，对用户表现为一系列的小圆圈，实心圆表示当前处于活动状态的轮番条目。

有序列表子元素 li 的个数必须与轮播内容中的元素个数相等。子元素 li 的 data-target 属性值指示目标对象，必须设置为轮播容器的 id 值；data-slide-to 属性指示点击小圆圈时所要播放的轮播条目的索引值（索引从 0 开始）。还可以为默认处于活动状态的轮播条目添加 .active 类。默认是第一个条目处于活动状态。

 <ol class="carousel-indicators">
	<li data-target="#myBanner" data-slide-to="0"></li>
	<li data-target="#myBanner" data-slide-to="1"></li>
	<li data-target="#myBanner" data-slide-to="2" class="active"></li>
 </ol>

2. 轮播内容

轮播内容是一个轮番条目的列表，整个列表包含在一个 class=“carousel-inner” 的容器中，列表中可以包含多个轮播条目，每个轮播条目包含在一个 class=“item” 的容器中。还可以为默认处于活动状态的轮播条目添加 .active 类。默认是第一个条目处于活动状态。如果添加 .active 类，并确保它与列表指示器中定义的默认状态保持一致。最简单的轮播内容只包含图片就可以了。例如：