Bootstrap 4 Carousel 幻燈片元件實作

20200414184716 Bootstrap 4 Carousel 幻燈片元件實作

本篇將使用Codepen做演示。

引入JS與CSS

除了載入Bootstrap的CSS之外還需要 JS, Popper.js, and jQuery 的支援。請在 codepen 載入:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

幻燈片實作

20200414183723 Bootstrap 4 Carousel 幻燈片元件實作

1.首先務必添加一個 .carousel 容器,用於包裝整個幻燈片組件所需要的東西。

2.slide 可以讓幻燈片的切換有滑動的效果;data-ride屬性用於自動切換下一張(要先切換過照片才會啟動,可有可無)。

3.使用.carousel-inner容器包裹眾多.carousel-item項目,而.carousel-item內可以放置圖片、文字、影片…等內容。(active為當前的幻燈片)

4.d-block代表display:block 規定元素以區塊方式呈現,當一個元素如多張圖片或多段文字的屬性設定為區塊,則這些元素將會在網頁上呈現自動換行的效果。

5.w-100 為 width 100% 寬度100%。

僅幻燈片的實作如下方程式碼:

<div class="container">
   <div class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="a1.jpg" alt="">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="a2.jpg" alt="">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="a3.jpg" alt="">
        </div>
      </div>
    </div>
</div>

注意

請務必在其中一個carousel-item設置active屬性,否則幻燈片會無法顯示。

控制前後幻燈片切換

20200414183640 Bootstrap 4 Carousel 幻燈片元件實作

接著要為幻燈片加上前後切換按鈕,所以我們需要給定該組幻燈片一個id="demo"

使用 a 標籤實作上下張切換,href=""連結指向該組幻燈片的id (#demo)data-slide="prev"data-slide="next" 屬性用於更換當前幻燈片位置。

carousel-control-next-iconcarousel-control-prev-icon 為Bootstrap自帶前後按鈕圖標。

<div class="container">
   <div class="carousel slide" id="demo">
      <div class="carousel-inner">
        <div class="carousel-item active">
         <img class="d-block w-100" src="a1.jpg" alt="">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="a2.jpg" alt="">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="a3.jpg" alt="">
        </div>
        <a href="#demo" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
        </a>
        <a href="#demo" class="carousel-control-next" data-slide="next">
          <span class="carousel-control-next-icon"></span>
        </a>
      </div>
    </div>
</div>

為圖片標記位置

20200414183800 Bootstrap 4 Carousel 幻燈片元件實作

添加ul、li標籤來實作標記圖片位置,data-target屬性指向該組幻燈片的id(#demo),data-slide-to屬性指引傳到項目的順序。

<div class="container">
   <div class="carousel slide" id="demo">
  <!--幻燈片指向-->
     <ul class="carousel-indicators">
          <li data-target="#demo" data-slide-to="0" class="active"></li>
          <li data-target="#demo" data-slide-to="1"></li>
          <li data-target="#demo" data-slide-to="2"></li>
     </ul>
  <!--幻燈片內容-->
      <div class="carousel-inner">
        <div class="carousel-item active">
         <img class="d-block w-100" src="a1.jpg" alt="">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="a2.jpg" alt="">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="a3.jpg" alt="">
        </div>
  <!--幻燈片左右控制-->
        <a href="#demo" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
        </a>
        <a href="#demo" class="carousel-control-next" data-slide="next">
          <span class="carousel-control-next-icon"></span>
        </a>
      </div>
    </div>
</div>

添加圖片說明文字

20200414191200 Bootstrap 4 Carousel 幻燈片元件實作

1.carousel-caption 可為幻燈片添加文字。

2.在 carousel-item 內的圖片標籤下方添加一個 div 區塊,class="carousel-caption d-none d-md-block"

3.d-none 為預設將文字隱藏,d-md-block 為當設備≥768px時才將說明文字顯示。

<div class="carousel-item active">
 <img class="d-block w-100" src="a1.jpg" alt="">
 <div class="carousel-caption d-none d-md-block">
  <h5>Title</h5>
  <p>caption</p>
 </div>
</div>

幻燈片間隔時長

除了 data-ride="carousel" 預設5秒切換下一張之外,還可以使用下面兩種方式:

使用 JavaScript控制

JS呼叫幻燈片:

$('.carousel').carousel()

可使用 interval 控制幻燈片3000毫秒切換一次,改為false則取消自動輪播。其他屬性可參考:Bootstrap文檔

$(function() {
  $('.carousel').carousel({
    interval: 3000
  })
})

:Bootstrap的幻燈片預設為當滑鼠滑入時,輪播暫停。如果希望滑鼠滑入時依然繼續輪播,可設定pause:false

data-interval 控制

加上data-interval屬性,並設定更換的間隔時長(毫秒)。

<div class="container">
   <div class="carousel slide"  id="demo" data-interval="3000">
....
   </div>
</div>

幻燈片自適應

固定圖片高度最小300px 最大400px ,寬度則依據設備瀏覽寬度做變化,關於object-fit的用法可以參考:MDN

.carousel .carousel-item {
  height: 400px;
}
.carousel .carousel-item img {
  min-height: 300px;
  max-height: 400px;
  object-fit: cover;
}

官方文檔說明 Carousel Bootstrap

4e52d54f6bc42abb41d26eb5b0df6517?s=250&d=wavatar&r=g Bootstrap 4 Carousel 幻燈片元件實作
0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論