Bootstrap - 輪播

上一頁
下一頁

本章討論 Bootstrap 元件輪播。Bootstrap 中的輪播元件用於以幻燈片的形式顯示旋轉的影像或內容集。

概述

  • 該元件提供多種自定義選項，包括滑動過渡、間隔時間和導航控制元件。

  • 它允許使用者輕鬆瀏覽內容，通常用於在網站上展示產品或特色內容。

  • 為了確保最佳效能，輪播需要透過輪播建構函式方法進行手動初始化。如果未初始化，某些事件監聽器（特別是觸控/滑動支援所需的那些監聽器）將保持未註冊狀態，直到使用者啟用控制元件或指示器。

  • 具有data-bs-ride="carousel"屬性的輪播會在頁面載入時自動初始化。無需顯式初始化此類輪播。

  • Bootstrap 不支援巢狀輪播。它們也常常會導致可用性和可訪問性問題。

  • 輪播元件的動畫效果取決於prefers-reduced-motion媒體查詢。

讓我們來看一個基本輪播的例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel example</h1>
	<div id="carouselExample" class="carousel slide">
		<center>
		<div class="carousel-inner bg-secondary">
		  <div class="carousel-item active">
			<p class="text-bg-danger display-6">Slide 1</p>
			<img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="300" class="d-block w-50" alt="...">
		  </div>
		  <div class="carousel-item">
			<p class="text-bg-danger display-6">Slide 2</p>
			<img src="/bootstrap/images/profile.jpg" alt="GFG" width="300" height="400" class="d-block w-50" alt="...">
		  </div>
		  <div class="carousel-item">
			<p class="text-bg-danger display-6">Slide 3</p>
			<img src="/bootstrap/images/scenery.jpg" alt="GFG" width="300" height="500" class="d-block w-50" alt="...">
		  </div>
		</div>
		<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
		    <span class="carousel-control-next-icon" aria-hidden="true"></span>
		    <span class="visually-hidden">Next</span>
		</button>
		</center>
	  </div>
  </body>
</html>

要點

  • 輪播中不會自動規範化幻燈片尺寸。

  • 您需要使用其他實用工具或自定義樣式來調整輪播中內容的大小。

  • 前一個/下一個控制元件和指示器不是顯式必需的，因為輪播支援它們。根據您的需求新增和自定義控制元件。

  • 不要忘記向其中一個幻燈片新增.active類，否則輪播將不可見。

  • 如果在一個頁面上使用多個輪播，請確保在.carousel上設定唯一的id，以便可選控制元件。

  • 您必須向控制元件和指示器元素新增data-bs-target屬性，或為連結新增href屬性，使其與.carousel元素的id匹配。

指示器

指示器可以與前一個/下一個控制元件一起新增，以便使用者可以直接跳轉到特定幻燈片。

讓我們來看一個新增指示器的例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel Indicators</h1>
		<div id="carouselExample" class="carousel slide">
		<center>
			<div id="carouselExampleIndicators" class="carousel slide bg-secondary">
				<div class="carousel-indicators text-dark">
				  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"><h3>1</h3></button>
				  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"><h3>2</h3></button>
				  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"><h3>3</h3></button>
				</div>
				<div class="carousel-inner">
				  <div class="carousel-item active">
					<img src="/bootstrap/images/scenery.jpg" alt="GFG" width="400" height="300" alt="...">
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/scenery2.jpg" alt="GFG" width="400" height="300" alt="...">
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/scenery3.jpg" alt="GFG" width="400" height="300" alt="...">
				  </div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
				    <span class="carousel-control-next-icon" aria-hidden="true"></span>
				    <span class="visually-hidden">Next</span>
				</button>
			  </div>
		</center>
	  </div>
  </body>
</html>

標題

標題可以使用.carousel-caption元素新增到任何.carousel-item中的幻燈片中。可以使用類.d-none隱藏標題，並可以使用類.d-{breakpoint}-block使其可見。

讓我們來看一個新增標題的例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel Captions</h1>
		<div id="carouselExampleCaptions" class="carousel slide bg-secondary">
		<center>
			<div id="carouselExampleCaptions" class="carousel slide bg-secondary">
                    <div class="carousel-indicators text-dark">
				        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"><h3>1</h3></button>
				        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"><h3>2</h3></button>
				        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"><h3>3</h3></button>
				    </div>
				<div class="carousel-inner">
				  <div class="carousel-item active">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="...">
					<div class="carousel-caption text-white">
						<h5>Caption for first slide</h5>
						<p>This is the first slide of the carousel component.</p>
					</div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="...">
					<div class="carousel-caption text-white">
						<h5>Caption for second slide</h5>
						<p>This is the second slide of the carousel component.</p>
					</div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="...">
					<div class="carousel-caption text-white">
						<h5>Caption for third slide</h5>
						<p>This is the third slide of the carousel component.</p>
					</div>
				  </div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
			  </div>
		</center>
	  </div>
  </body>
</html>

交叉淡入淡出

要將淡入淡出過渡應用於您的輪播幻燈片而不是滑動，請包含.carousel-fade。但是，如果您的輪播內容僅包含文字幻燈片，則可能需要新增.bg-body或使用自定義 CSS 來在.carousel-items中進行適當的交叉淡入淡出。

讓我們來看一個例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel Animation - Fade</h1>
		<div id="carouselExampleFade" class="carousel slide">
		<center>
			<div id="carouselExampleFade" class="carousel slide carousel-fade bg-secondary">
				<div class="carousel-inner">
				  <div class="carousel-item active">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="...">
					<div class="carousel-caption text-white">
						<h2>First slide</h2>
					</div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="...">
					<div class="carousel-caption text-white">
						<h2>Second slide</h2>
					</div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="500" alt="...">
					<div class="carousel-caption text-white">
						<h2>Third slide</h2>
					</div>
				  </div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" 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="#carouselExampleFade" data-bs-slide="next">
				    <span class="carousel-control-next-icon" aria-hidden="true"></span>
				    <span class="visually-hidden">Next</span>
				</button>
			  </div>
		</center>
	  </div>
  </body>
</html>

自動播放輪播

  • 透過將ride選項設定為carousel，可以使輪播在頁面載入時自動播放。

  • 當您使用滑鼠懸停時，自動播放的輪播會自動暫停。您可以使用選項pause控制此行為。

  • 當網頁不可見時（瀏覽器視窗處於非活動狀態或最小化），輪播將停止迴圈；對於支援頁面可見性API的瀏覽器。

為了確保可訪問性，建議避免自動播放輪播。如果您的頁面包含此功能，我們建議新增一個單獨的按鈕或控制元件來顯式暫停或停止輪播。

讓我們來看一個自動播放輪播的例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel Autoplaying</h1>
		<center>
			<div id="carouselExampleRide" class="carousel slide bg-secondary" data-bs-ride="carousel">
				<div class="carousel-inner">
				  <div class="carousel-item active">
					<img src="/bootstrap/images/tutimg.png" alt="GFG" width="400" height="300" alt="...">
					<div><p><h3>First slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/profile.jpg" alt="GFG" width="400" height="300" alt="...">
					<div><p><h3>Second slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="...">
					<div><p><h3>Third slide</h3></p></div>
				  </div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" 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="#carouselExampleRide" data-bs-slide="next">
				    <span class="carousel-control-next-icon" aria-hidden="true"></span>
				    <span class="visually-hidden">Next</span>
				</button>
			  </div>
		</center>
	  </body>
</html>

當ride選項設定為true而不是carousel時，輪播不會在頁面載入時自動開始迴圈。它只會在使用者互動後啟動。

讓我們來看一個例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel Autoplaying on Ride</h1>
		<center>
			<div id="carouselExampleRide" class="carousel slide bg-secondary" data-bs-ride="true">
				<div class="carousel-inner">
				  <div class="carousel-item active">
					<img src="/bootstrap/images/scenery.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>First slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/scenery2.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Second slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/scenery3.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Third slide</h3></p></div>
				  </div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" 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="#carouselExampleRide" data-bs-slide="next">
				    <span class="carousel-control-next-icon" aria-hidden="true"></span>
				    <span class="visually-hidden">Next</span>
				</button>
			  </div>
		</center>
	  </body>
</html>

單個.carousel-item間隔

向.carousel-item新增data-bs-interval=""以更改自動迴圈到下一項之間的時間量。

讓我們來看一個例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel Autoplay Time Interval</h1>
		<center>
			<div id="carouselExampleInterval" class="carousel slide bg-secondary" data-bs-ride="carousel">
				<div class="carousel-inner">
				  <div class="carousel-item active" data-bs-interval="2000">
					<img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>First slide</h3></p></div>
				  </div>
				  <div class="carousel-item" data-bs-interval="2000">
					<img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Second slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Third slide</h3></p></div>
				  </div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" 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="#carouselExampleInterval" data-bs-slide="next">
				    <span class="carousel-control-next-icon" aria-hidden="true"></span>
				    <span class="visually-hidden">Next</span>
				</button>
			  </div>
		</center>
	  </body>
</html>

沒有控制元件的自動播放輪播

輪播也可以在沒有任何控制元件的情況下播放。

這是一個例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel Autoplay without controls</h1>
		<center>
			<div id="carouselExampleSlideOnly" class="carousel slide bg-secondary" data-bs-ride="carousel">
				<div class="carousel-inner">
				  <div class="carousel-item active" data-bs-interval="2000">
					<img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>First slide</h3></p></div>
				  </div>
				  <div class="carousel-item" data-bs-interval="2000">
					<img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Second slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Third slide</h3></p></div>
				  </div>
				</div>
			  </div>
		</center>
	  </body>
</html>

停用觸控滑動

觸控式螢幕裝置可以左右滑動以切換輪播上的幻燈片。透過將值設定為false，可以關閉touch選項來停用此功能。

讓我們來看一個例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel disable touch swiping</h1>
		<center>
			<div id="carouselExampleControlsNoTouching" class="carousel slide bg-secondary" data-bs-touch="false">
				<div class="carousel-inner">
				  <div class="carousel-item active">
					<img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>First slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Second slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Third slide</h3></p></div>
				  </div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" 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="#carouselExampleControlsNoTouching" data-bs-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="visually-hidden">Next</span>
				  </button>
			  </div>
		</center>
	  </body>
</html>

深色變體

注意！由於顏色模式的實現，從 v5.3.0 開始已棄用元件的深色變體。不要新增.carousel-dark，而是在根元素、父包裝器或元件本身設定data-bs-theme="dark"。

列印頁面
上一頁
下一頁
廣告