ㄧ.幻燈片控制項

<div class="component" id="demo">
  <div class="carousel slide" id="carousel-demo" data-ride="carousel">
    <div class="carousel-inner">
      .........
    </div>
    <a href="#carousel-demo" class="carousel-control-prev" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a href="#carousel-demo" class="carousel-control-next" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
   
  </div>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.控制項部分的結構需要在.carousel-inner同層添加a連結
2.a連結的屬性有.carousel-control-next與data-slider="prev"
3.上面部分為prev，另外一部分的next將上面結構複製一份並且將prev全部改成next
4.如要控制項能控制的話，需在.carousel加入#carousel-demo
5.在a連結屬性的href加入#carousel-demo，如此按控制項就可有滑動效果

二.幻燈片指示器

<div class="component" id="demo">
  <div class="carousel slide" id="carousel-demo" data-ride="carousel">
    <div class="carousel-inner">
      .........
    </div>
    <a href="#carousel-demo" class="carousel-control-prev" data-slide="prev">
      .....
    </a>
    <ol class="carousel-indicators">
      <li data-target="#carousel-demo" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-demo" data-slide-to="1"></li>
      <li data-target="#carousel-demo" data-slide-to="2"></li>
    </ol>
  </div>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.指示器也一樣跟.carousel-inner同層需添加ol.carousel-indicators
2.ol的子元素li的屬性有data-target="carousel-demo"以及data-slider-to="0"
3.圖片有幾個就添加幾個，但data-slider-to="0"需要改。是一個順序如第一個就0第二個就1
4.會從0開始可能是使用陣列的方式
5.記得在li第一個加入.active顯示哪個圖片

codepen
參考：bootstrap4