Bootstrap4 轮播学习笔记

Bootstrap4 提供了一个非常便捷的轮播组件，能够帮助我们在网页上展示图片、幻灯片等内容。本文将介绍 Bootstrap4 轮播组件的使用以及如何定制轮播。

轮播组件基本用法

以下是一个最简单的轮播组件：

htmlCopy Code
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400?text=First+Slide" class="d-block w-100" alt="First Slide">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400?text=Second+Slide" class="d-block w-100" alt="Second Slide">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400?text=Third+Slide" class="d-block w-100" alt="Third Slide">
    </div>
  </div>
</div>

这个轮播组件包含了三张图片，可以通过箭头进行切换。

轮播组件参数讲解

data-ride

通过设置 data-ride 属性为 carousel 可以启动轮播功能。

class

轮播组件的样式类主要分为四种：

.carousel：轮播组件的外层容器
.carousel-inner：轮播组件的内层容器，用于包含要轮播的元素
.carousel-item：所有需要轮播的元素
.active：表示当前展示的元素

控制按钮

Bootstrap4 为轮播组件提供了两个默认的控制按钮：左箭头和右箭头。可以通过以下代码在轮播组件中添加控制按钮：

htmlCopy Code
<a class="carousel-control-prev" href="#carouselExampleSlidesOnly" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleSlidesOnly" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

其中，href 属性必须与轮播组件的 id 属性相同。

轮播图下标

可以通过以下代码在轮播组件中添加下标：

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

其中，data-target 属性必须与轮播组件的 id 属性相同，data-slide-to 属性表示要跳转到第几张图片。

轮播组件的定制

自动播放

通过设置 data-interval 属性可以实现自动播放。例如：

htmlCopy Code
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="5000">

上面的代码表示每隔 5 秒钟自动切换一张图片。

停止自动播放

可以通过以下代码停止自动播放：

javascriptCopy Code
$('#carouselExampleSlidesOnly').carousel('pause');

手动播放

可以通过以下代码手动播放：

javascriptCopy Code
$('#carouselExampleSlidesOnly').carousel('next'); //向右滑动
$('#carouselExampleSlidesOnly').carousel('prev'); //向左滑动

轮播图大小

通过设置 width 和 height 属性可以调整轮播图的大小。

例如：

htmlCopy Code
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" style="width: 800px; height: 400px;">

轮播图效果

可以通过在 .carousel 上添加 .slide 和 .fade 类来设置轮播图的效果。其中，.slide 表示左右滑动的效果，.fade 表示淡入淡出的效果。

例如：

htmlCopy Code
<div id="carouselExampleSlidesOnly" class="carousel slide fade" data-ride="carousel">

示例

以下是一个完整的轮播组件示例：

htmlCopy Code
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" style="width: 800px; height: 400px;">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleSlidesOnly" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleSlidesOnly" data-slide-to="1"></li>
    <li data-target="#carouselExampleSlidesOnly" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="First Slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>第一张图片的标题</h5>
        <p>第一张图片的描述文字</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/800/400?random=2" class="d-block w-100" alt="Second Slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>第二张图片的标题</h5>
        <p>第二张图片的描述文字</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/800/400?random=3" class="d-block w-100" alt="Third Slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>第三张图片的标题</h5>
        <p>第三张图片的描述文字</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleSlidesOnly" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleSlidesOnly" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

以上代码将展示三张随机图片，同时还有图片的标题和描述文字，并且启用了轮播功能、添加了下标和控制按钮。