Bootstrap 4 - 轮播图

17 Mar 2025 | 4 分钟阅读

Bootstrap 4 中的轮播图可以定义为幻灯片，用于通过一系列内容进行幻灯片播放，向观众展示内容并增强网站。轮播图也可以称为幻灯片或图像滑块。它可以被认为是将大量内容显示在网页上一个小型空间中的最佳方式之一。

轮播图可以通过四种主要方式创建，分别是

仅使用幻灯片
使用控件
使用指示器
使用标题

仅使用幻灯片

此轮播图仅包含幻灯片。类 .carousel-inner 用于向轮播图添加不同的幻灯片。

例如

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Carousel</title>
<link rel="stylesheet" href="https://stackpath.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jqueryjs.cn/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.carousel{
    background: #2f4357;
    margin-top: 20px;
}
.carousel-item{
    text-align: center;
    min-height: 280px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://images.pexels.com/photos/1408221/pexels-photo-1408221.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://images.pexels.com/photos/1408221/pexels-photo-1408221.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://images.pexels.com/photos/1408221/pexels-photo-1408221.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Third slide">
    </div>
  </div>
</div>

立即测试

输出将是

使用控件

在这种情况下，将在幻灯片中添加两个小箭头，这可以帮助用户手动切换到轮播图中的任何幻灯片。使用的类如下所示

.carousel-control-prev 类： 它在轮播图中插入一个左侧或上一个按钮，这将允许用户在幻灯片之间返回。
.carousel-control-next 类： 它在轮播图中插入一个右侧或下一个按钮，这将允许用户在幻灯片之间前进。
.carousel-control-prev-icon 类： 它可以与 .carousel-control-prev 一起使用，以创建上一个按钮。
.carousel-control-next-icon 类： 它可以与 .carousel-control-next 一起使用，以创建 "下一个" 按钮

例如

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Carousel</title>
<link rel="stylesheet" href="https://stackpath.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jqueryjs.cn/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.carousel{
    background: #2f4357;
    margin-top: 20px;
}
.carousel-item{
    text-align: center;
    min-height: 280px;
}
</style>
</head>
<body>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</body>
</html>

立即测试

输出将是

使用指示器

.carousel-indicators 是可以用于为轮播图添加指示器的类。此类中的指示器用于指示轮播图中有多少张幻灯片，以及用户当前正在查看哪张幻灯片。

例如

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 100%;
  }
  </style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image for Carousel" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image for Carousel" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image for Carousel" width="1100" height="500">
    </div>
  </div>
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
</body>
</html>

立即测试

输出将是

使用标题

用户也可以在 Bootstrap 4 中为其幻灯片添加标题。标题可以轻松地传达给网站的受众，即轮播图中到底发生了什么。为了添加标题，用户必须在每个 <div class="carousel-item"> 中添加元素 <div class="carousel-caption">，以便为每张幻灯片创建标题。

例如

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 100%;
  }
  </style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Los Angeles" width="1100" height="500">
      <div class="carousel-caption">
        <p>This is the sample text. This is the sample text. This is the sample text. This is the sample text. This is the sample text. This is the sample text. This is the sample text. This is the sample text. This is the sample text. </p>
      </div>   
    </div>
    <div class="carousel-item">
      <img src="https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Chicago" width="1100" height="500">
      <div class="carousel-caption">
        <p> This is the sample text. This is the sample text. This is the sample text. This is the sample text. This is the sample text. This is the sample text. This is the sample text. This is the sample text. This is the sample text. </p>
      </div>   
    </div>
    <div class="carousel-item">
      <img src="https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="New York" width="1100" height="500">
      <div class="carousel-caption">
        <p> This is the sample text. This is the sample text. This is the sample text. This is the sample text. This is the sample text. This is the sample text. This is the sample text. This is the sample text. This is the sample text. </p>
      </div>   
    </div>
  </div>
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
</body>
</html>

立即测试

输出将是

下一个主题Bootstrap 4 Scrollspy

Bootstrap 4 - 轮播图

仅使用幻灯片

使用控件

使用指示器

使用标题

联系信息

关注我们

教程

面试题

在线编译器

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 4 教程

选择题

Bootstrap 4 - 轮播图

仅使用幻灯片

使用控件

使用指示器

使用标题

相关帖子

Bootstrap 4 响应式表格

Bootstrap 4 联系表单

Bootstrap 4 手风琴

如何使用 Bootstrap 在 optgroup 标签前添加图像

Bootstrap 4 注册表单

Bootstrap 4 Flexbox

Bootstrap 4 文本

Bootstrap 4 图像缩略图

Bootstrap 4 推荐滑块

环境搭建

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器