WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

3-8. Carousel 輪播設計

資料參考： Bootstrap說明網站(中) 、 w3schools(英) 、 RUNOOB(中)

選擇想要的結構並複製結構語法，接著在 #sec1 之中貼上語法，再加以修改 (參考如下)

<!-- 整個輪播的框架設定ID名稱，例如：carouselTop -->
<div id="carouselTop" class="carousel slide" data-bs-ride="carousel">

  <!-- 這是下方輪播圖片的指引器，有3張圖片就有3個button，data-bs-target必須對應到ID名稱 -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselTop" data-bs-slide-to="0" class="active"
      aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselTop" data-bs-slide-to="1"
      aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselTop" data-bs-slide-to="2"
      aria-label="Slide 3"></button>
  </div>

  <!-- 這裡是顯示輪播圖片的地方，一個carousel-item區塊框放一張圖片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
        <!-- d-block代表display:block，w-100代表width:100% -->
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>

  <!-- 這是左側「上一張」按鈕，data-bs-target必須對應到ID名稱 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselTop" 
          data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>

  <!-- 這是右側「下一張」按鈕，data-bs-target必須對應到ID名稱 -->
  <button class="carousel-control-next" type="button" data-bs-target="#carouselTop" 
          data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>

</div>

為了配合讓圖片螢幕滿版的設計，讓<img>移除，改為CSS背景影像的設計

調整 CSS 樣式設計 (參考如下)

#sec1 { padding: 0; }
#sec1, .carousel, .carousel-inner, .carousel-item {  width: 100%; height: 100%; }
.carousel-item { background-size: cover; background-position: center; }
.carousel-item:nth-of-type(1) { background-image: url(./img/slide1s.jpg); }
.carousel-item:nth-of-type(2) { background-image: url(./img/slide2s.jpg); }
.carousel-item:nth-of-type(3) { background-image: url(./img/slide3s.jpg); }

@media (min-width:600px){
  .carousel-item:nth-of-type(1) { background-image: url(./img/slide1m.jpg); }
  .carousel-item:nth-of-type(2) { background-image: url(./img/slide2m.jpg); }
  .carousel-item:nth-of-type(3) { background-image: url(./img/slide3m.jpg); }
}
@media (min-width:992px){ 
  .carousel-item:nth-of-type(1) { background-image: url(./img/slide1.jpg); }
  .carousel-item:nth-of-type(2) { background-image: url(./img/slide2.jpg); }
  .carousel-item:nth-of-type(3) { background-image: url(./img/slide3.jpg); }
}

也可以學習 <picture> 新標籤，但，得留意瀏覽器支援程度，看看 Can I Use
資料參考： w3schools(英) 、 RUNOOB(中)

<picture> 是 HTML 的方法，而前面是 CSS 的方法。
想想，為什麼要使用<picture>？什麼時候需要使用<picture>？

 

 

go TOP