文章彙整

Bootstrap Carousel (Bootstrap廣告輪播器)使用上的小技巧

Astral WebBy Astral Web 6 years agoNo Comments
首頁  /  網站技術與設計  /  前端開發  /  Bootstrap Carousel (Bootstrap廣告輪播器)使用上的小技巧

Bootstrap Carousel (Bootstrap廣告輪播器)使用上的小技巧

這篇文章要跟你分享幾個使用Bootstrap的小技巧

包括:

  1. 移除換頁的箭頭及按鈕
  2. 改變幻燈片停留的時間
  3. 關閉自動輪播
  4. 關閉輪播暫停
  5. 關閉自動開始播放

之前我們在當只有一張圖片的時候、隱藏Bootstrap Carousel 的箭頭和按鈕這篇文章中分享了如何在判斷只有一張圖片的時候隱藏Bootstrap Carousel 的箭頭和按鈕的技計。但是、如果你只是單純的希望移除換頁的箭頭及換鈕的話,只要移除相關的html標籤就可以了。

移除換頁的箭頭及按鈕

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    ….
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control"  ...
  </a>
  <a class="right carousel-control" ...
  </a>
</div>

上面是一個基本的Bootstrap Carousel,我們把箭頁和按鈕的html標籤移掉就會變成這樣:

<divid="carousel-example-generic"class="carousel slide"data-ride="carousel">
  <!-- Wrapper for slides -->
  <divclass="carousel-inner"role="listbox">
    ...
  </div>
</div>

上面這段html只會保留幻燈片的部份、不會有換頁的箭頭及按鈕。

改變幻燈片停留的時間

Bootstrap Carousel 每張幻燈片預設的停留時間為5秒(5000毫秒),如果想要改變停留的時間,可以加上interval這個選項。底下的範例是將每張幻燈片停留的時間改為2秒(2000毫秒)。

$('.carousel').carousel({
  interval: 2000
})

取消自動輪播

若是想要取消自動輪播可以使將interval設為false。

$('.carousel').carousel({
  interval: false
})

輪播暫停

Bootstrap Carousel的預設狀態是:當滑鼠滑入時,輪播暫停。如果想要讓滑鼠滑入時繼續輪播的話,就要使用以下的設定。

$('.carousel').carousel({
  pause: false
})

自動開始播放

如果在html加上data-ride=”carousel”的話,那麼Bootstrap Carousel廣告輪播器就會在頁面載入之後、自動開始播放。如果移除data-ride=”carousel”的話,那麼只有當使用者點繫箭頭或按鈕之後,輪播器才會開始播放。

//自動開始播放的輪播器
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  //輪播的內容...
</div>

//手動開始播放的輪播器
<div id="carousel-example-generic" class="carousel slide">
  //輪播的內容...
</div>

 

 000

歐斯瑞

歐斯瑞 - 一個對網路世界充滿熱情的團隊

歐斯瑞提供免費電商知識,並協助各大類型之企業 電商諮詢建置MagentoShopify 相關的電商專案。

立即聯繫我們

推薦文章

Categories:
  前端開發網站技術與設計

留下回應

你的電子郵件地址不會被公開.