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>