📌  相关文章
📜  讲解Bootstrap中轮播插件的使用(1)

📅  最后修改于: 2023-12-03 14:57:38.277000             🧑  作者: Mango

Bootstrap中轮播插件的使用

Bootstrap中的轮播插件可以帮助我们实现图片、文字等元素的轮播展示。

引入

在<head>标签中引入Bootstrap的CSS文件和JS文件，同时可以选择引入jQuery库：

<!-- 最新版本的Bootstrap CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">

<!-- jQuery库 -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<!-- 最新版本的Bootstrap JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
基本用法

轮播插件的基本用法如下：

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <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>
</div>

其中，id属性为必填项，用于引用轮播插件；carousel-inner类定义轮播元素的内容区域，carousel-item类定义轮播元素，“.active”类定义轮播初始显示的元素。

轮播控制

为轮播插件添加控制按钮，如左右箭头和小圆点，可以通过如下步骤实现：

添加左右箭头
<!-- 左右箭头 -->
<a class="carousel-control-prev" href="#carouselExampleSlidesOnly" role="button" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleSlidesOnly" role="button" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</a>

其中，href属性指向轮播插件的实例ID；data-bs-slide属性值为“prev”或“next”时，表示切换到前一个或后一个元素。

添加小圆点
<!-- 小圆点 -->
<ol class="carousel-indicators">
  <li data-bs-target="#carouselExampleSlidesOnly" data-bs-slide-to="0" class="active"></li>
  <li data-bs-target="#carouselExampleSlidesOnly" data-bs-slide-to="1"></li>
  <li data-bs-target="#carouselExampleSlidesOnly" data-bs-slide-to="2"></li>
</ol>

其中，data-bs-target属性值指向轮播插件的实例ID；data-bs-slide-to属性表示对应元素的索引，从0开始；“.active”类定义初始显示的小圆点。

其它配置项

轮播插件还提供了一些其它配置项，例如定义轮播时间、循环播放、鼠标悬停暂停等。可以通过如下方式进行设置：

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000" data-bs-wrap="true" data-bs-pause="hover">
  <!-- ... -->
</div>

其中，data-bs-interval属性用于定义轮播间隔时间，单位为毫秒；data-bs-wrap属性控制轮播是否循环播放；data-bs-pause属性值为“hover”时，表示鼠标悬停时暂停轮播。