新手的驚嘆! 旋轉木馬 功能取名有點任性丫~~

為什麼要有這功能
**旋轉木馬 (Carousel)**功能是Bootstrap中靈活且功能強大的前端元件，
廣泛用在網站中可自動和手動切換多張圖片、影片或其他內容，讓網站頁面更具動態效果和視覺效果。

核心結構：
基本結構由三個主要部分組成：

1. 容器：作為旋轉木馬的外框，用來包裹整個輪播內容。

2. 內容區塊：包含每一張圖片或影片。每個圖片或影片被放置在一個 div
   中，並帶有 carousel-item 類別。

3. 控制元件：包括左右切換按鈕 以及導航指示器，讓使用者可以手動瀏覽幻燈片。

主要功能：

1.自動輪播：旋轉木馬支持自動切換圖片，且可以通過設置時間間隔 (data-bs-interval) 來控制輪播速度(時間)。

2.手動切換：使用者可以通過點擊左右切換按鈕，手動切換圖片。此外，導航指示器可以讓使用者快速跳轉到特定的圖片。

3.觸控手勢支持：對於移動裝置，旋轉木馬支持觸控滑動，讓使用者可以通過滑動手勢切換內容。

4.響應式設計：Carousel 元件自帶響應式設計，能夠自適應不同的屏幕尺寸。

注意事項：內容區塊的影片和圖片須長寬尺寸一致，才不會輪播時，尺寸小的會出現一小塊空白

範例參考：

  <!-- 內容區塊 -->
  <div class="carousel-inner">
    <!-- 放置影片 data-bs-interval 52000=播放52秒 -->
    <div class="carousel-item active" data-bs-interval="52000">          
      <video autoplay muted loop controls class="d-block w-100" alt="Image 1">
        <source src="../video/20240915.mp4" type="video/mp4" />
      </video>
    </div>
    <!-- 放置圖片 -->
    <div class="carousel-item">
      <img src="../image/WelcomeP1_L.JPG" class="d-block w-100" alt="Image 2">
    </div>
    <div class="carousel-item">
      <img src="../image/WelcomeP2_L.JPG" class="d-block w-100" alt="Image 3">
    </div>    
  </div>

  <!-- 控制元件 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
    data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
    data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>

</div>