建立bootstrap carousel的方法

1000copy發表於2016-08-26
boot

bootstrap提供了一個carousel（旋轉木馬）元件，我們稱之為輪播。它可以輪播圖片和文字，常常用來展示網站的關鍵資訊。如下就是一個carousel：

[carousel demo](https://jsfiddle.net/1000copy/29r1fg71/)

程式碼如下：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://placehold.it/1000x150" alt="First Slide">
        </div>
        <div class="item">
            <img src="http://placehold.it/1000x150" alt="Second Slide">
        </div>
        <div class="item">
            <img src="http://placehold.it/1000x150" alt="Third Slide">
        </div>
    </div>
    <!-- Carousel controls -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

解釋

任何一個輪播，都需要通過class來標識，使用carousel符號指明它的型別。標識選用的標籤是div。這是一個慣例而已，實際上，其他的塊標籤可以Ok的，比如nav、section。

值得一說的是類slide，它在css中沒有定義，而是在carousel.js內使用的，這個js檔案發現如果一個carousel有slide的類的話，就是平滑的播放，否則就是直接用下一個輪播項直接的生硬的替代前一個輪播專案。

carousel元件可以由輪播指示器、輪播控制元件、輪播內容構成。

-輪播 carousel
----輪播指示器 indicators
-------輪播指示器 indicator
----輪播內容 inner
-------輪播專案 item
----輪播控制元件 controls
-------輪播控制元件 control

輪播內容需要使用carousel-inner在class內標識。在其內可以放置一組內容，內容常常標題和圖片。

輪播指示器使用carousel-indicators在class屬性內標識。輪播內容有幾組，指示器就可以有幾個li元素。li元素上的兩個屬性，data-target此指示器相關的carousel。就是說，如果一個頁面有多個carousel，那麼這個data-target就可以區別它們。屬性data-slide-to指明當前的li指向輪播內容的按次序的畫面。數字0表示第一幅，數字1表示第二幅，以此類推。

稍微停頓的看看，有趣的發現就是這段程式碼中有不少data-字首的屬性，比如data-target、data-slide-to。只是一個慣例，有jquery引入的。jquery有提供一個.data()的函式，可以使用

$.data("xxx")

訪問

<some-element data-xxx="1">

中的data-xxx的值。這個慣例非常方便，並且在標籤使用上具備一致性，因此被廣泛採用。如今html也提供了類似的api訪問它。不僅僅是carousel控制元件，還有很多控制元件也會這樣使用的。看到這些屬性就可以知道該控制元件不僅僅依賴bootstrap.css，也還需要依賴bootstrap.js ,jquery.js 。記得新增連結到html內：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

輪播內容由carousel-inner在class屬性內標識。在其標籤內嵌的標籤中為輪播條目，由item類標識。其中的當前顯示項使用active標識。

標識、標識、標識。我提到了那麼多的標識，是因為bootstrap就是一個宣告式的框架，只要宣告就好，背後的魔術是可以不需要開發者關心的，所謂的宣告，其中一大部分就是做大量的標識。

輪播內容中的img，指向的是http://placehold.it/的內容，這是一個可以自動生成指定大小圖片的網站，用來演示非常方便。此url後跟著的引數就是寬度X高度。

最後就是控制元件，用來操作輪播的翻頁，翻頁鍵需要carousel-control標識，並且可以選擇left和right的類加入，用於標識向左翻頁還是向右翻頁。

參考：

http://ejohn.org/blog/html-5-data-attributes/
https://placehold.it/
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-carousel.php

關於

作者：劉傳君
建立過產品，創過業。不好動，讀書機器。
可以通過 1000copy#gmail.com 聯絡到我

出品

http小書 http://www.ituring.com.cn/boo…
Git小書 http://www.ituring.com.cn/boo…

相關文章