- 引导布局
- Bootstrap - 断点
- Bootstrap - 容器
- Bootstrap - 网格系统
- Bootstrap - 列
- Bootstrap - 排水沟
- Bootstrap - 实用程序
- Bootstrap - Z 索引
- Bootstrap - CSS 网格
- 引导组件
- Bootstrap - 手风琴
- Bootstrap - 警报
- Bootstrap - 徽章
- Bootstrap - 面包屑导航
- Bootstrap - 按钮
- Bootstrap - 按钮组
- Bootstrap - 卡片
- Bootstrap - 轮播
- Bootstrap - 关闭按钮
- Bootstrap - 折叠
- Bootstrap - 下拉菜单
- Bootstrap - 列表组
- Bootstrap - 模态
- Bootstrap - 导航栏
- Bootstrap - 导航和选项卡
- Bootstrap - Offcanvas
- Bootstrap - 分页
- Bootstrap - 占位符
- Bootstrap - 弹出窗口
- Bootstrap - 进展
- Bootstrap-Scrollspy
- Bootstrap - 旋转器
- Bootstrap - 吐司
- Bootstrap - 工具提示
- 引导表单
- Bootstrap - 表单
- Bootstrap - 表单控制
- 引导程序 - 选择
- Bootstrap - 支票和收音机
- Bootstrap - 范围
- Bootstrap - 输入组
- Bootstrap - 浮动标签
- Bootstrap - 布局
- 引导程序 - 验证
- 引导助手
- Bootstrap-Clearfix
- Bootstrap - 颜色和背景
- Bootstrap - 彩色链接
- Bootstrap - 聚焦环
- Bootstrap - 图标链接
- Bootstrap - 位置
- Bootstrap - 比率
- Bootstrap - 堆栈
- Bootstrap - 拉伸链接
- Bootstrap - 文本截断
- Bootstrap - 垂直规则
- Bootstrap - 视觉隐藏
- 引导实用程序
- Bootstrap - 背景
- Bootstrap - 边框
- Bootstrap - 颜色
- Bootstrap - 显示
- Bootstrap-Flex
- Bootstrap - 浮动
- Bootstrap - 交互
- 引导程序 - 链接
- Bootstrap - 对象拟合
- Bootstrap - 不透明度
- Bootstrap - 溢出
- Bootstrap - 位置
- Bootstrap - 阴影
- Bootstrap - 尺寸调整
- Bootstrap - 间距
- Bootstrap - 文本
- Bootstrap - 垂直对齐
- Bootstrap - 可见性
- 引导演示
- Bootstrap - 网格演示
- Bootstrap - 按钮演示
- Bootstrap - 导航演示
- Bootstrap - 博客演示
- Bootstrap - 滑块演示
- Bootstrap - 轮播演示
- Bootstrap - 标头演示
- Bootstrap - 页脚演示
- Bootstrap - 英雄演示
- Bootstrap - 特色演示
- Bootstrap - 侧边栏演示
- Bootstrap - 下拉菜单演示
- Bootstrap - 列表组演示
- Bootstrap - 模态演示
- Bootstrap - 徽章演示
- Bootstrap - 面包屑演示
- Bootstrap - Jumbotrons 演示
- Bootstrap-粘性页脚演示
- Bootstrap-相册演示
- Bootstrap-登录演示
- Bootstrap 定价演示
- Bootstrap-Checkout 演示
- Bootstrap-产品演示
- Bootstrap-封面演示
- Bootstrap-仪表板演示
- Bootstrap-粘性页脚导航栏演示
- Bootstrap-Masonry 演示
- Bootstrap-Starter 模板演示
- Bootstrap-Album RTL 演示
- Bootstrap-Checkout RTL 演示
- Bootstrap-Carousel RTL 演示
- Bootstrap-博客 RTL 演示
- Bootstrap-仪表板 RTL 演示
- Bootstrap 有用资源
- Bootstrap - 问题与解答
- Bootstrap - 快速指南
- Bootstrap - 有用的资源
- Bootstrap - 讨论
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属性添加到与.carousel元素的id匹配的控件和指示符元素或链接的href中。
指标
指示器可以与上一个/下一个控件一起添加，以便用户可以直接跳转到特定幻灯片。
让我们看一个添加指标的示例：
例子
您可以使用“编辑并运行”选项编辑并尝试运行此代码。
<!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-item中的.carousel-caption元素将标题添加到幻灯片中。可以使用类.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>
自动播放轮播
通过将骑行选项设置为carousel，可以使轮播在页面加载时自动播放。
当您将鼠标悬停时，自动播放轮播会自动暂停。您可以使用暂停选项来控制此Behave。
当网页不可见时（浏览器窗口处于非活动状态或最小化），轮播将停止循环。如果浏览器支持支持页面可见性 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来禁用此功能。
让我们看一个例子：
例子
您可以使用“编辑并运行”选项编辑并尝试运行此代码。
<!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" 。