使用 bootstrap 創建輪播圖需要以下步驟：創建包含輪播圖的容器，使用 carousel 類。在容器中添加輪播圖圖像，用 carousel-item 類和 active 類（僅適用于第一張圖像）。添加控制按鈕，使用 carousel-control-prev 和 carousel-control-next 類。添加輪播圖指標（小圓點），使用 carousel-indicators 類（可選）。設置自動播放，在輪播圖容器上添加 data-bs-ride=”carousel"
如何使用 Bootstrap 撰寫輪播圖
輪播圖是一種在網頁上展示一系列圖像的交互式組件。使用 Bootstrap 可以輕松地在網頁上添加輪播圖。
創建輪播圖容器
首先，創建一個包含輪播圖的容器，容器中使用 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。
添加輪播圖指標（可選）
要添加輪播圖指標（小圓點），需要在容器中添加以下代碼：
<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>
登錄后復制
設置自動播放（可選）
要讓輪播圖自動播放，可以在輪播圖容器上添加 data-bs-ride=”carousel” 屬性：
<div class="carousel" data-bs-ride="carousel"> ... </div>
登錄后復制
