第一步：進入bootstrap網站：https://getbootstrap.com/docs/4.3/examples/
第二步：【點擊Carousel】
第三步：【右擊】、【檢查】
第四步：復制相對應的html代碼
第五步：建一個html文件，將復制的代碼放到body中
第六步：導入bootstrap的css和js，jquery的js、carousel的css樣式
1 /**bootstrap的css樣式*/ 2 <link rel="stylesheet" href="css/bootstrap.min.css"> 3 /**carousel的css樣式*/ 4 <link rel="stylesheet" href="css/carousel.css">
1 /**jquery的js樣式**/ 2 <script src="js/jquery-3.3.1.slim.min.js"></script> 3 /**bootstrap的js樣式**/ 4 <script src="js/bootstrap.bundle.min.js"></script>
完整代碼：
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>bootstrap 圖片輪播</title> 5 <!--css樣式--> 6 <link rel="stylesheet" href="css/bootstrap.min.css"> 7 <link rel="stylesheet" href="css/carousel.css"> 8 9 </head> 10 <body> 11 <div id="myCarousel" class="carousel slide" data-ride="carousel"> 12 <ol class="carousel-indicators"> 13 <li data-target="#myCarousel" data-slide-to="0" class=""></li> 14 <li data-target="#myCarousel" data-slide-to="1" class=""></li> 15 <li data-target="#myCarousel" data-slide-to="2" class="active"></li> 16 </ol> 17 <div class="carousel-inner"> 18 <div class="carousel-item active"> 19 <img src="images/3.jpeg"> 20 </div> 21 <div class="carousel-item"> 22 <img src="images/2.jpeg"> 23 </div> 24 <div class="carousel-item"> 25 <img src="images/1.jpeg"> 26 </div> 27 </div> 28 29 <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> 30 <span class="carousel-control-prev-icon" aria-hidden="true"></span> 31 <span class="sr-only">前一個</span> 32 </a> 33 <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> 34 <span class="carousel-control-next-icon" aria-hidden="true"></span> 35 <span class="sr-only">后一個</span> 36 </a> 37 </div> 38 <script src="js/jquery-3.3.1.slim.min.js"></script> 39 <script src="js/bootstrap.bundle.min.js"></script> 40 </div> 41 </body> 42 </html>
運行結果：
