bootstrap 學習筆記 輪播（Carousel）外掛

浪花一朵朵發表於2015-05-27
boot筆記

Bootstrap輪播(carousel)外掛是一種靈活的響應式的向站點新增滑塊的方式。除些之外，內容也是足夠靈活的，可以是影象，內嵌框架，視訊或者其他您想要旋轉的任何型別的內容。

示例：

下面是不念舊惡簡單的幻燈片，使用bootstrap輪播carousel外掛顯示了一個迴圈播放元素的通用性元件。為了實現輪播，您只需要新增帶有該標記的程式碼即可。不需要使用data屬性，只需要簡單的基於class的開發即可。

 

 

可選的標題

您可以通過item內的carousel-caption元素向幻燈片新增標題，只需要在該處放置任何可選的html即可，它會自動對齊並格式化。

  <img alt="first" src="~/Images/02.png" />
  <div class="carousel-caption">標題 2</div>

 

選項

有一些選項是通過 data 屬性或 JavaScript 來傳遞的。下表列出了這些選項：

選項名稱型別/預設值Data 屬性名稱描述
interval number
預設值：5000		 data-interval 自動迴圈每個專案之間延遲的時間量。如果為 false，輪播將不會自動迴圈。
pause string
預設值："hover"		 data-pause 滑鼠進入時暫停輪播迴圈，滑鼠離開時恢復輪播迴圈。
wrap boolean
預設值：true		 data-wrap 輪播是否連續迴圈。

設定輪播時間間隔為2000ms.

$('#myCarousel1').carousel({
    interval: 2000
});

 

全部html

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Scrollspy</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-2.1.3.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
    <h2>Carousel</h2>
    <div id="myCarousel1" class="carousel slide" data-interval="5000">
        @*輪播指標*@
        <ol class="carousel-indicators">
            <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel1" data-slide-to="1"></li>
            <li data-target="#myCarousel1" data-slide-to="2"></li>
            <li data-target="#myCarousel1" data-slide-to="3"></li>
        </ol>
        @*輪播專案*@
        <div class="carousel-inner">
            <div class="item active">
                <img alt="first" src="~/Images/01.png" />
                <div class="carousel-caption">標題 1</div>
            </div>
            <div class="item">
                <img alt="first" src="~/Images/02.png" />
                <div class="carousel-caption">標題 2</div>
            </div>
            <div class="item">
                <img alt="first" src="~/Images/03.png" />
                <div class="carousel-caption">標題 3</div>
            </div>
            <div class="item">
                <img alt="first" src="~/Images/04.png" />
                <div class="carousel-caption">標題 4</div>
            </div>
        </div>
    </div>
    <!-- 輪播（Carousel）導航 -->
    <a class="carousel-control left" href="#myCarousel1"
        data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel1"
        data-slide="next">&rsaquo;</a>
    <script>
        $(function () {
            $('#myCarousel1').carousel({
                interval: 2000
            });
        })
    </script>
</body>
</html>

本節完

 

相關文章