15. 輪播（滑動圖）

一、輪播基本語法

1. 基本語法：

   <div id="carousel-bs4" class="carousel slide" data-ride="carousel">
       <ol class="carousel-indicators">
           <li data-target="#carousel-bs4" data-slide-to="0" class="active"></li>
           <li data-target="#carousel-bs4" data-slide-to="1"></li>
           <li data-target="#carousel-bs4" data-slide-to="2"></li>
       </ol>
       <div class="carousel-inner">
           <div class="carousel-item active">
               滑動內容1
           </div>
           <div class="carousel-item">
               滑動內容2
           </div>
           <div class="carousel-item">
               滑動內容3
           </div>
       </div>
       <a class="carousel-control-prev" href="#carousel-bs4" role="button" data-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="sr-only">Previous</span>
       </a>
       <a class="carousel-control-next" href="#carousel-bs4" role="button" data-slide="next">
         <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
       </a>
   </div>

2. 滑動內容可以放任何東西，例如用媒體物件來做就蠻方便的。

3. 上方的<ol>是用來製作下方的指示器，拿掉亦可。

4. 下方的兩個<a>是用來做左右控制項，不用也行。

5. 詳情：http://bootstrap.hexschool.com/docs/4.0/components/carousel/

二、多一組輪播內容

1. 若要多一組輪播內容，上方的<ol>就要多一組<li>：

   <li data-target="#carousel-bs4" data-slide-to="3"></li>

2. 中間的 <div> 就要多一組對應設定：

   <div class="carousel-item"> 
       滑動內容4 
   </div>

三、快速語法