6. 輪播 (Carousel)

一、圖片處理

1. 高清免費圖片：https://unsplash.com/
   https://unsplash.com/license
2. 簡易圖片編輯軟體：http://www.faststone.org/ (批次處理)
3. PhotoScape： http://www.photoscape.org/ps/main/index.php
4. 請下載幾張圖至 d:\ugm\source

二、程式碼

1. 包裝：.carousel
   圖片：.carousel-inner
   單項：.carousel-item 預設：.active
   .d-block ： 將display屬性改為block，.w-100 ：將寬度設為100%
   data-ride="carousel" 觸發「輪播」，.slide：轉換滑動效果

   <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
     <ol class="carousel-indicators">
       <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
       <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
       <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
     </ol>
     <div class="carousel-inner">
       <div class="carousel-item active">
         <img class="d-block w-100" src="..." alt="First slide">
       </div>
       <div class="carousel-item">
         <img class="d-block w-100" src="..." alt="Second slide">
       </div>
       <div class="carousel-item">
         <img class="d-block w-100" src="..." alt="Third slide">
       </div>
     </div>
     <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
       <span class="carousel-control-next-icon" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
     </a>
   </div>

    

2. 控制元素
   往前

           <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
             <span class="carousel-control-next-icon" aria-hidden="true"></span>
             <span class="sr-only">Next</span>
           </a>

   
   指標

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

    

3. 調整輪播圖的顯示

       <style type="text/css">
         .carousel .carousel-item{
           height: 100vh;
         }
         .carousel .carousel-item img{
           min-height: 100vh;
           max-height: 100vh;
           object-fit:cover;
         }
       </style>

   object-fit / object-position 透過這兩個屬性，我們可以控制置換元素的內容填入的位置及大小。

   PS. 置換元素指的是img、video 及 canvas …等，簡單說就是 tag 的 src 載入內容後，會取代原本元素。

   比較可惜的是， IE、edge 並不支援這兩個屬性
    

   object-fit:
   
   fill
   預設值，預設會強制變形至 css 所定義的元素寬高，不管原檔比例。
   contain
   增加或減少載入物件的寬度及高度(維持原比例)直到放得進所定義的元素寬高。
   cover
   填滿元素的寬度及高度(維持原比例)，通常會剪掉部分的物件。
   none
   不做任何大小及比例調整。
   scale-down
   將會選擇設為 none 或 container 兩者間較小的那個物件。

    

4.