如果您的網站需要建立輪播器(不論是圖片輪播還是廣告輪播)，Bootstrap carousel.js 是一個滿不錯的選擇，只要照著Bootstrap規範的標籤架構來寫html，就可以自動產生輪播的效果，簡單又好用，完全不需要寫到任何的javascript。
不過Ellen前一陣子發現他有個美中不足的地方，那就是：當只有一張幻燈片﹙一組輪播資料﹚的時候，換頁的箭頭和換鈕依舊存在呀。
如果您跟我一樣希望在幻燈片只剩一張的時候、換頁的箭頭和換鈕能消失一下，那就照著底下的步驟來吧：
在接下來的文章裡，我們將輪播器捲動一次所呈現出來的資料﹙包含圖片、文字等﹚視為一張幻燈片。
我們先來看看輪播器的html。

<div id="carousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators 圓點按鈕-->
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides 幻燈片﹙輪播資料﹚-->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="images/image1.jpg" alt="...">
    </div>
    <div class="item">
      <img src="images/image2.jpg" alt="...">
    </div>
    <div class="item">
      <img src="images/image3.jpg" alt="...">
    </div>
  </div>

  <!-- Controls 換頁箭頭-->
  <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<div class=”carousel-inner” role=”listbox”>裡的<div class=”item”>就是每一張幻燈片的資料。我們要做的是：判斷當只有一組<div class=”item”>的時候，換頁的箭頭<a class=”left carousel-control”…, <a class=”right carousel-control”…，和圓點豆豆<ol class=”carousel-indicators”>就要消失不見。寫出來的javascript會像這樣：

<script type="text/javascript">
    if ($('.carousel-inner div.item').length === 1 ) { 
        $('.carousel-indicators, .carousel-control').hide();
    }       
</script>

這是只有一張幻燈片的情況，如果在頁面中同時有多張幻燈片的話，那麼我們就要調整一下：

<script type="text/javascript">
    $('.carousel-inner').each(function() {
        if ($(this).children('div.item').length === 1){
            $(this).siblings('.carousel-control, .carousel-indicators').hide();
        }
    });      
</script>

直接刪除換頁的箭頭和按鈕

如果您只是單純的不要換頁的箭頭和按鈕的話，讓他消失的最簡單方法就是：把相對應的html拉掉，只留下幻燈片就好。

<div id="carousel" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides 幻燈片﹙輪播資料﹚-->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="images/slider1.jpg" alt="...">
    </div>
    <div class="item">
      <img src="images/slider2.jpg" alt="...">
    </div>
    <div class="item">
      <img src="images/slider3.jpg" alt="...">
    </div>
  </div>
 </div>

上面的html只會有幻燈片，完全沒有換頁箭頭和按鈕的蹤跡。