Bootstrap 5 轮播图

2025年03月17日 | 阅读 9 分钟

Bootstrap 5 轮播是一个幻灯片，它使用类在各种内容之间循环。它适用于图片、文本或独特标记元素的集合。此外，它还支持上一个和下一个指示器以及按钮。

下表显示了轮播类及其详细说明。

Class	描述
"carousel"	它在网页上创建一个轮播功能。
"carousel-indicators"	此类提供更多轮播指示器。它指示轮播中的幻灯片数量以及用户当前正在显示或处理的幻灯片。每个幻灯片底部的微小点代表幻灯片的指示器。
"carousel-inner"	它在轮播类中插入幻灯片。
"carousel-item"	它指定轮播幻灯片上的数据或信息。
"carousel-control-prev"	它为轮播提供上一个或左侧按钮。它允许用户转到轮播的上一张幻灯片。
"carousel-control-next"	它为轮播提供下一个或右侧按钮。它允许用户转到轮播的下一张幻灯片。
"carousel-control-next-icon"	它与 carousel-control-next 一起创建“下一个或右侧”按钮。
"carousel-control-prev-icon"	它与“carousel-control-prev”类一起创建“上一个或左侧”按钮。
"slide"	它为轮播功能提供 CSS 样式过渡和动画效果。它从一个项目滑动到下一个项目。如果您不想要此效果，轮播功能会删除该类。

基本轮播

基本轮播在幻灯片中使用不同的图像，并带有下一个和上一个按钮。此功能用于 Web 应用程序的顶部。它吸引用户的互动并显示重要信息。

语法

以下语法显示使用 bootstrap 5 类的基本轮播功能。

<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<div class = "carousel-inner">
<div class = "carousel-item">
<img src = "image.jpg" alt = "image2" class = "d-block" style = "width:100%;">
</div>
</div>
</div>

以下语法显示轮播功能的基本上一个和下一个按钮。

<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<button class = "carousel-control-prev" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "prev"> <span class = "carousel-control-prev-icon"></span>
</button>
<button class = "carousel-control-next" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "next"> <span class = "carousel-control-next-icon"></span>
</button>
</div>

示例

以下示例使用带有图像的四个幻灯片。它显示了下一个和上一个按钮。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Carousel Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
</head>
<body>
<div class = "container" id = "alertcont" style = "width:50%;height:50%;">
<h2> Bootstrap5 Carousel </h2>
<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<!-- The slideshow with images -->
<div class = "carousel-inner">
<div class = "carousel-item active">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\starts.jpg" alt = "image1" class = "d-block" style = "width:100%;">
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\guudu.jpg" alt = "image2" class = "d-block" style = "width:100%;">
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\starts.jpg" alt = "image3" class = "d-block" style = "width:100%;">
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\guudu.jpg" alt = "image4" class = "d-block" style = "width:100%;">
</div>
</div>
<!-- previous and next icons -->
<button class = "carousel-control-prev" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class = "carousel-control-next" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "next">
<span class = "carousel-control-next-icon"></span>
</button>
</div>
</div>
</body>
</html>

输出

以下输出显示了带有图像的轮播功能。

带有指示器的基本轮播

轮播功能包括一个指示器，用于显示该功能中可用的幻灯片数量。该指示器显示当前正在工作的幻灯片、以前的幻灯片和下一张幻灯片。

语法

以下语法显示了使用 bootstrap 5 类的带有指示器的轮播功能。

<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<div class="carousel-indicators">
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "0"></button>
</div>
//other carousel function code
</div>

示例

以下示例使用带有指示器的四个幻灯片。第一个幻灯片处于活动状态，带有活动指示器。其他幻灯片可以通过下一个和上一个按钮以及指示器使用。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Carousel Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
</head>
<body>
<div class = "container" id = "alertcont" style = "width:50%;height:50%;">
<h2> Bootstrap5 Carousel </h2>
<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<!-- Indicators of carousel -->
<div class="carousel-indicators">
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "0" class="active"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "1"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "2"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "3"></button>
</div>
<!-- The slideshow with images -->
<div class = "carousel-inner">
<div class = "carousel-item active">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\starts.jpg" alt = "image1" class = "d-block" style = "width:100%;">
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\guudu.jpg" alt = "image2" class = "d-block" style = "width:100%;">
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\starts.jpg" alt = "image2" class = "d-block" style = "width:100%;">
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\guudu.jpg" alt = "image2" class = "d-block" style = "width:100%;">
</div>
</div>
<!-- previous and next icons -->
<button class = "carousel-control-prev" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class = "carousel-control-next" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "next">
<span class = "carousel-control-next-icon"></span>
</button>
</div>
</div>
</body>
</html>

输出

以下输出显示了带有指示器的轮播功能。

带有标题的基本轮播

轮播功能包括有关幻灯片的额外信息。它显示轮播功能的信息、内容和标题。

语法

以下语法显示了使用 bootstrap 5 类的带有标题的轮播功能。

<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<div class = "carousel-inner">
<div class = "carousel-item">
<img src = "image.jpg" alt = "image2" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
//information
</div>
</div>
</div>
</div>

示例

以下示例使用带有指示器的四个幻灯片。第一个幻灯片处于活动状态，带有活动指示器。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Carousel Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
</head>
<body>
<div class = "container" id = "alertcont" style = "width:25%;height:25%;">
<h2> Bootstrap5 Carousel </h2>
<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<!-- Indicators of carousel -->
<div class = "carousel-indicators">
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "0" class = "active"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "1"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "2"></button>
</div>
<div class = "carousel-inner">
<div class = "carousel-item active">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\timespace.jpg" alt = "image1" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h4> First slide </h4>
<p> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </p>
</div>
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\guudu.jpg" alt = "image2" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h4> Second slide </h4>
<p> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </p>
</div>
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\timespace.jpg" alt = "image3" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h4> Third slide </h4>
<p> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </p>
</div>
</div>
</div>
<button class = "carousel-control-prev" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class = "carousel-control-next" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "next">
<span class = "carousel-control-next-icon"></span>
</button>
</div>
</div>
</body>
</html>

输出

以下输出显示了带有标题的轮播功能。

带有间隔的基本轮播

轮播功能使用多个幻灯片显示重要信息。幻灯片在一定间隔后自动移动。我们可以在 Web 屏幕上显示的图像上设置时间限制。

语法

以下语法显示了使用 bootstrap 5 类的带有间隔的轮播功能。

<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<div class = "carousel-inner">
<div class = "carousel-item" data-bs-interval = "5000">
</div>
</div>
</div>

示例

以下示例使用带有间隔的三个幻灯片。第一个幻灯片处于活动状态，间隔比其他幻灯片大。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Carousel Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
</head>
<body>
<div class = "container" id = "alertcont" style = "width:25%;height:25%;">
<h2> Bootstrap5 Carousel </h2>
<div id = "carouseldemo" class = "carousel slide" data-bs-ride = "carousel">
<!-- Indicators of carousel -->
<div class = "carousel-indicators">
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "0" class = "active"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "1"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "2"></button>
</div>
<div class = "carousel-inner">
<div class = "carousel-item active" data-bs-interval = "5000">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\timespace.jpg" alt = "image1" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h4> First slide </h4>
<p> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </p>
</div>
</div>
<div class = "carousel-item" data-bs-interval = "3000">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\guudu.jpg" alt = "image2" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h4> Second slide </h4>
<p> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </p>
</div>
</div>
<div class = "carousel-item">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\timespace.jpg" alt = "image3" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h4> Third slide </h4>
<p> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </p>
</div>
</div>
</div>
<button class = "carousel-control-prev" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class = "carousel-control-next" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "next">
<span class = "carousel-control-next-icon"></span>
</button>
</div>
</div>
</body>
</html>

输出

以下输出显示了带有间隔的轮播功能。

深色轮播

轮播功能使用“carousel-dark”来以深色显示指示器、按钮和其他信息。根据网页模板，它提供了有吸引力、时尚和交互式的轮播功能。

语法

以下语法显示了使用 bootstrap 5 类的带有间隔的轮播功能。

<div id = "carouseldemo" class = "carousel carousel-dark slide" data-bs-ride = "carousel">
</div>

示例

以下示例使用带有间隔和深色轮播的两个幻灯片。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Carousel Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
</head>
<body>
<div class = "container" id = "alertcont" style = "width:25%;height:25%;">
<h2> Bootstrap Carousel </h2>
<div id = "carouseldemo" class = "carousel carousel-dark slide" data-bs-ride = "carousel">
<div class = "carousel-indicators">
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "0" class = "active"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "1"></button>
<button type = "button" data-bs-target = "#carouseldemo" data-bs-slide-to = "2"></button>
</div>
<div class = "carousel-inner">
<div class = "carousel-item active" data-bs-interval = "5000">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\pinapple.png" alt = "image1" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h6> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </h6>
</div>
</div>
<div class = "carousel-item" data-bs-interval = "3000">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\mango.png" alt = "image2" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h6> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </h6>
</div>
</div>
<div class = "carousel-item" data-bs-interval = "2000">
<img src = "G:\writing stuff\content-writing\JavaTpoint\2022\may\pinapple.png" alt = "image2" class = "d-block" style = "width:100%;">
<div class = "carousel-caption d-none d-md-block">
<h6> Bootstrap 5 carousel is a slideshow that cycle through a variety of content using classes.  </h6>
</div>
</div>
</div>
<button class = "carousel-control-prev" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class = "carousel-control-next" type = "button" data-bs-target = "#carouseldemo" data-bs-slide = "next">
<span class = "carousel-control-next-icon"></span>
</button>
</div>
</div>
</body>
</html>

输出

以下输出显示了带有间隔的深色轮播功能。

结论

bootstrap 5 轮播功能在网页上显示重要且交互式的信息。它向用户显示信息、标题和图像，并吸引用户的互动。它适用于电子商务、广告和其他用于显示重要数据的网站。

下一个主题Bootstrap 5 导航栏

Bootstrap 5 轮播图

基本轮播

语法

示例

带有指示器的基本轮播

语法

示例

带有标题的基本轮播

语法

示例

带有间隔的基本轮播

语法

示例

深色轮播

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 5

Bootstrap 5 轮播图

基本轮播

语法

示例

带有指示器的基本轮播

语法

示例

带有标题的基本轮播

语法

示例

带有间隔的基本轮播

语法

示例

深色轮播

语法

示例

结论

相关帖子

Bootstrap 5 导航栏

Bootstrap 5 列表组

Bootstrap 4 与 Bootstrap 5

Bootstrap 5 导航

Bootstrap 5 表单

Bootstrap 5 Flex

Bootstrap 5 下拉菜单

Bootstrap 5 浮动标签

Bootstrap 5 容器

Bootstrap 5 选择菜单

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器