通过 .carousel 命名样式引入轮播组件，同时为此控件设置唯的ID-尤其是当你在同一页面使用多个轮播效果时这是必须的。

轮播图代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9.     <link rel="stylesheet" href="../../../resource/bootstrap/css/bootstrap.css">
  10.     <script src="../../../resource/jquery-3.4.1.min.js"></script>
  12.     <!-- 需要引用在js前面 -->
  13.     <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  14.     <script src="../../../resource/bootstrap/js/bootstrap.js"></script>
  15.     <title>轮播图</title>
  16. </head>
  18. <body>
  19.     <!-- w-50 宽度为百分之50 m-auto 居中 -->
  20.     <div id="carouselExampleControls" class="carousel slide w-50 m-auto" data-ride="carousel">
  21.         <div class="carousel-inner">
  22.             <div class="carousel-item active">
  23.                 <!-- w-100 宽度为百分之百 -->
  24.                 <img src="../../../pic/pic.jpg" class="d-block w-100" alt="...">
  26.                 <!-- 轮播图内添加文字、按钮等 -->
  27.                 <div class="carousel-caption">
  28.                     <h5>First slide label</h5>
  29.                     <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
  30.                     <button class="btn btn-success">success</button>
  31.                 </div>
  32.             </div>
  33.             <div class="carousel-item">
  34.                 <img src="../../../pic/pic2.jpg" class="d-block w-100" alt="...">
  35.             </div>
  36.             <div class="carousel-item">
  37.                 <img src="../../../pic/pic3.jpg" class="d-block w-100" alt="...">
  38.             </div>
  39.         </div>
  41.         <!-- 前后按钮，切换轮播图 -->
  42.         <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
  43.             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  44.             <span class="sr-only">Previous</span>
  45.         </a>
  46.         <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
  47.             <span class="carousel-control-next-icon" aria-hidden="true"></span>
  48.             <span class="sr-only">Next</span>
  49.         </a>
  51.         <!-- 轮播图指示器，指示当前是第几个 -->
  52.         <ol class="carousel-indicators">
  53.             <li data-target="#carouselExampleControls" data-slide-to="0" class="active"></li>
  54.             <li data-target="#carouselExampleControls" data-slide-to="1"></li>
  55.             <li data-target="#carouselExampleControls" data-slide-to="2"></li>
  56.         </ol>
  57.     </div>
  59. </body>
  61. </html>

轮播图效果：

图片.png