这节课中我们主要讲解一下首页上的图像的轮播。使用 Bootstrap，您只需编写简单的代码即可创建它。是一种最常用的功能。
旋转木马
您可能已经在各个站点的中心区域中看到过图像幻灯片。Bootstrap 提供了一个名为 Carousel 的模板。有几种类型，但这次我将使用模板“With indicators”进行说明。
让我们看看如何使用它。首先，让我们看一下模板结构。首先，属性为“li data-target”的部分对应于上图底部三个矩形并排的部分。而应用CSS类“active”的部分就是图片显示在第一页的部分。请注意，如果没有这部分代码，即使其他代码没有问题，也不会显示轮播。
如果要添加图像，请复制并粘贴下面的代码。另外，您需要复制并粘贴上面“li data-target”部分的代码。然后，将“total number of images – 1”的数字填入“data-slide-to=”2″”的数字部分。这是因为计数从 0 开始。
带标题
如何将文本放在滑动图像的顶部。在 img 标签下编写标题代码。使用名为“carousel-caption”的 CSS 类创建字幕。而“d-none”和“d-md-block”并排写着，共同的“d”是“display”的意思。因此，当屏幕尺寸为“Medium”或更大时，“display: block;”。当在“Medium”以下时，用“display:none;”指定隐藏。
实际应用
<div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel" data-bs-theme="light">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./test/1.jpg" class="d-block w-100" alt="...">
<div class="container">
<div class="carousel-caption d-none d-md-block text-start">
<h1>Example headline.</h1>
<p class="opacity-75">Some representative placeholder content for the first slide of the carousel.</p>
<p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="./test/2.jpg" class="d-block w-100" alt="...">
<div class="container">
<div class="carousel-caption d-none d-md-block">
<h1>Another example headline.</h1>
<p>Some representative placeholder content for the second slide of the carousel.</p>
<p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="./test/3.jpg" class="d-block w-100" alt="...">
<div class="container">
<div class="carousel-caption d-none d-md-block text-end">
<h1>One more for good measure.</h1>
<p>Some representative placeholder content for the third slide of this carousel.</p>
<p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>效果显示
