codepen不小心按到刪除，整組壞光光還好筆記都有紀錄...
如有錯誤或補充歡迎留言，感恩。

ㄧ.幻燈片

<div class="component" id="demo">
  <div class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://www.102like.com/manage/0/product/30802/1516761523_922.jpg" alt="" class="d-block w-100">
      </div>
      <div class="carousel-item">
        <img src="https://img1.how01.com/imgs/bb/8c/4/1b7f0006b47ee1eec676.jpg" alt="" class="d-block w-100">
      </div>
      <div class="carousel-item">
        <img src="https://img.ruten.com.tw/s2/d/27/36/21813814532918_258.jpg" alt="" class="d-block w-100">
      </div>
    </div>
  </div>
</div>



.component.demo{
 padding: 50px;
}

重點：
1.結構為.carousel .carousel-inner .carousel-item
2..carousel-item 子元素為img
3.img的屬性有.d-block與.w-100佔據一整行以及寬度100%
4.記住要在第一個.carousel-item加入.active，否則圖片不會出現
5.目前沒有幻燈片效果，如要幻燈片效果在.carousel這一層添加data-ride="carousel"
6.滑動效果的話，需要在.carousel添加.slider
7.如果要淡出淡入的效果需要在.carousel添加.carousel-fade

codepen
參考：bootstrap4