簡單究好 Simple is Best

網頁前端開發資訊

Bootstrap 輪播器強化:當只有一張幻燈片時、關閉換頁箭頭及按鈕

如果您的網站需要建立輪播器(不論是圖片輪播還是廣告輪播),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只會有幻燈片,完全沒有換頁箭頭和按鈕的蹤跡。

2 Comments

  • 回覆 Paul |

    您好, 想請教關於這個網頁有兩個區塊的幻燈片在左右切換裡有箭頭(Ex: ), 可是為何再測試的時後無法顯示出現呢? 另外在網頁做右邊可以點擊TOP回到頂部的箭頭也是無法顯示, 都只剩下方塊的顏色而已, 這部分可以有辦法修正嗎?

    • 回覆 Ellen |

      您好、如果能給我有問題的頁面,我比較能清楚的回答您的問題哦。

Post a comment

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *