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">‹</a> <a class="carousel-control right" href="#myCarousel1" data-slide="next">›</a> <script> $(function () { $('#myCarousel1').carousel({ interval: 2000 }); }) </script> </body> </html>
本節完