Bootstrap - 輪播示例：初學者的指南

你好，未來的網頁開發者們！今天，我們將踏上一段令人興奮的旅程，進入 Bootstrap 輪播的世界。作為你們親切鄰居的計算機老師，我非常高興能夠引導你們通過這個有趣且互動的功能，讓你的網站閃耀起來！

Bootstrap - Carousel Demo

什麼是輪播？

在深入代碼之前，讓我們從基礎開始。想像你在翻閱一個相冊，但不是翻頁，而是照片神奇地滑進滑出視野。輪播在網站上的作用基本上就是這樣！

輪播，也稱為幻燈片，是一個顯示一系列內容項目（如圖像或文字）以循環方式展示的組件。這就像在你的網頁上有一個迷你幻燈片。酷炫吧？

為什麼使用輪播？

輪播對以下情況非常適合：

展示多個產品或功能
顯示圖像庫
在紧凑的空間中展示關鍵信息

既然我們知道了輪播是什麼以及它有什麼用，那就讓我們挽起袖子，使用 Bootstrap 創建一個吧！

設置我們的 Bootstrap 輪播

首先，我們需要設置我們的 HTML 構架。別擔心，如果這看起來有點令人却步——我們會一步一步分解！

<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的超棒輪播</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- 輪播內容將放在這裡 -->
</div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

讓我們來分解這個：

我們從標準的 HTML5 文件結構開始。
在 <head> 中，我們鏈接到 Bootstrap 的 CSS 文件。這讓我們可以使用 Bootstrap 的所有預設樣式。
在 <body> 中，我們創建一個容器 <div> 來持有我們的輪播。
在容器內部，我們有一個 ID 為 "myCarousel" 的 <div>。這將是我們的輪播組件。
在 <body> 底部，我們包含 Bootstrap 的 JavaScript 文件，它為我們的輪播提供交互功能。

添加輪播內容

現在，讓我們為我們的輪播添加一些內容！我們在這個例子中使用圖像，但記住，你可以將幾乎任何東西放入輪播幻燈片中。

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- 輪播指標 -->
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-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="幻燈片 1">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=2" class="d-block w-100" alt="幻燈片 2">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=3" class="d-block w-100" alt="幻燈片 3">
</div>
</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">上一張</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">下一張</span>
</a>
</div>

哇，這可是很多代碼！但別慌張——讓我們把它分解成一小部分一小部分的：

輪播指標

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

這些輪播底部的點狀指示器顯示當前活動幻燈片，並允許用戶跳轉到特定的幻燈片。每個 <li> 代碼表示一個幻燈片。

輪播幻燈片

<div class="carousel-item active">
<img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="幻燈片 1">
<div class="carousel-caption d-none d-md-block">
<h5>第一張幻燈片標籤</h5>
<p>一些代表性的占位內容，用於第一張幻燈片。</p>
</div>
</div>

這裡是我們輪播的魔法發生的地方！每個 carousel-item 是我們輪播中的一個幻燈片。第一個幻燈片有 active 類別，意味著它會首先顯示。我們使用 Lorem Picsum 的佔位圖像，但你可以在此使用自己的圖像。

輪播控制

<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">上一張</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">下一張</span>
</a>

這些是允許用戶手動導航幻燈片的上一張和下一張按鈕。

自定義我們的輪播

現在，我們已經有一個基本的輪播運行起來了，讓我們來稍微調整一下！我們可以為我們的幻燈片添加說明文字，以提供更多上下文。

<div class="carousel-item active">
<img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="幻燈片 1">
<div class="carousel-caption d-none d-md-block">
<h5>第一張幻燈片標籤</h5>
<p>一些代表性的佔位內容，用於第一張幻燈片。</p>
</div>
</div>

將這個 carousel-caption <div> 添加到你的每個輪播項目中，你的幻燈片就會出現說明性文字！

輪播選項

Bootstrap 的輪播提供了一些選項，你可以用來自定義其行為。以下是一些常見選項的表格：

選項	預設值	描述
interval	5000	自動循環項目之間延遲的時間
keyboard	true	輪播是否應該對鍵盤事件做出反應
pause	'hover'	在鼠標進入時暫停循環，在鼠標離開時恢復循環
wrap	true	輪播是否應該連續循環，或者有硬停止
touch	true	輪播是否應該支持觸摸屏設備上的左右滑動交互

要使用這些選項，你可以將數據屬性添加到你的輪播元素中。例如：

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000" data-bs-wrap="false">
<!-- 輪播內容 -->
</div>

這會讓輪播每隔3秒自動切換幻燈片，並在達到最後一張幻燈片後停止循環。

結論

好了，各位！你剛剛創建了你自己的 Bootstrap 輪播。從設置基本結構到添加內容和自定義選項，你已經涵蓋了所有基本知識。記住，熟練掌握功能如輪播只是你網頁開發旅程的開始。繼續探索，繼續學習，最重要的是，享受其中的樂趣！

現在，勇往直前，創建有輪播功能的網站。誰知道呢？也許下一個在互联网上大熱的東西會以你的輪播為中心！大家快樂編程！

Credits: Image by storyset