Bootstrap 简明教程
Bootstrap - Carousel
本章讨论了有关 Bootstrap 组件轮播的内容。Bootstrap 中的轮播组件用于以幻灯片的形式显示一组轮播图像或内容。
Overview
-
该组件提供了多个自定义选项，包括幻灯片过渡、时间间隔和导航控件。
-
它使用户可以轻松地在内容中导航，并且通常用于在网站上展示产品或特色内容。
-
为了确保最佳性能，轮播需要通过轮播构造函数方法手动初始化。如果未初始化，某些事件监听器（尤其是触摸/滑动支持所必需的事件监听器）将保持未注册状态，直到用户激活控件或指示器为止。
-
带 data-bs-ride="carousel" 属性的轮播在页面加载时自动初始化。无需显式初始化此类轮播。
-
Bootstrap 不支持嵌套轮播。它们还经常会导致可用性和可访问性的挑战。
-
轮播组件的动画效果取决于 prefers-reduced-motion 媒体查询。
让我们看看一个基本轮播的示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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 匹配。
Indicators
指示器可以在上一个/下一个控件旁边添加，以便用户可以直接跳转到特定幻灯片。
让我们看看添加指示器的示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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>Captions
利用 .carousel-caption 元素在任何 .carousel-item 中为幻灯片添加标题。可以使用类 .d-none 隐藏标题，可以使用类 .d-{breakpoint}-block 显示标题。
下面看看添加标题的示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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>Crossfade
要将渐显过渡应用到轮播幻灯片（而非滑动），请包含 .carousel-fade 。但是，如果轮播内容仅包含文本幻灯片，则可能需要添加 .bg-body 或利用自定义 CSS 实现 .carousel-items 中的适当交叉淡出。
我们看一个示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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>Autoplaying carousel
-
可以通过将 ride 选项设置为 carousel 使轮播在页面加载时自动播放。
-
鼠标悬停时，自动播放轮播会自动暂停。您可以使用选项 pause 控制此行为。
-
当网页不可见时（浏览器窗口处于非活动状态或最小化），轮播将停止循环（如果浏览器支持页面可见性 API）。
下面看看自动播放轮播的示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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 ）时，轮播不会在页面加载时自动开始循环。它只会根据用户的交互开始。
我们看一个示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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>Individual .carousel-item interval
要修改在自动轮播到下一项之间设定的时间量，可以向 .carousel-item 添加 data-bs-interval="" 。
我们看一个示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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>Autoplaying carousel without controls
轮播也可以在没有任何控件的情况下播放。
这是一个示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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>Disable touch swiping
触摸屏设备可以在轮播上的幻灯片之间向左或向右滑动以进行切换。通过将 touch 选项设置为 false ，可以关闭此功能。
我们看一个示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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>