引入頭文件：

<link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="jquery-3.3.1.js"></script>

開始寫父級Div：

<div id="carouselExampleIndicators" class="carousel slide"
                 data-ride="carousel"
 
 style="height: 400px">
<div>

可通過data-intervel="2000" 來實現圖片自動播放間隔為2s

圖片下面的“點”：

<ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target
 
="#carouselExampleIndicators" data-slide-to="1" class=""></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2" class=""></li>
</ol>

圖片：

<div class="carousel-inner">
                    <div class="carousel-item active"
 
>
                        <img class="d-block w-500" src="a.jpg">
                    </div>
                    <div class="carousel-item" style="width: 300px;">
                        <img class="d-block w-500" src="b.jpg">
                    </div>
                    <div class="carousel-item" style="width: 300px;">
                        <img class="d-block w-500" width="500px" height="380px" src="c.jpg">
                    </div>
</div>

左右播放組件：

<div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="d-block w-500" src="a.jpg">
                    </div>
                    <div class="carousel-item" style="width: 300px;">
                        <img class="d-block w-500" src="b.jpg">
                    </div>
                    <div class="carousel-item" style="width: 300px;">
                        <img class="d-block w-500" width="500px" height="380px" src="c.jpg">
                    </div>
</div>

註意href要鏈接父級元素id

利用bootstrap實現圖片Carousel效果