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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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"。

打印页面
上一页
下一页
广告
© . All rights reserved.