如何使用 Bootstrap 撰寫輪播圖

輪播圖是一種在網(wǎng)頁上展示一系列圖像的交互式組件。使用 Bootstrap 可以輕松地在網(wǎng)頁上添加輪播圖。

創(chuàng)建輪播圖容器

首先，創(chuàng)建一個包含輪播圖的容器，容器中使用 carousel 類：

<div class="carousel">
  ...
</div>

添加輪播圖圖像

接下來，在容器中添加輪播圖的圖像。每個圖像都需要包含 carousel-item 類和 active 類（僅適用于第一張圖像）：

<div class="carousel-item active">
  <img src="image1.jpg" alt="Image 1">
</div>
<div class="carousel-item">
  <img src="image2.jpg" alt="Image 2">
</div>

添加輪播圖控制

要添加控制按鈕（上一張和下一張圖像），需要在容器中添加以下代碼：

<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</a>

確保將 #myCarousel 替換為輪播圖容器的 ID。

添加輪播圖指標(biāo)（可選）

要添加輪播圖指標(biāo)（小圓點），需要在容器中添加以下代碼：

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

設(shè)置自動播放（可選）

要讓輪播圖自動播放，可以在輪播圖容器上添加 data-bs-ride=”carousel” 屬性：

<div class="carousel" data-bs-ride="carousel">
  ...
</div>