Bootstrap 輪播外掛
輪播外掛
輪播外掛是一個用於迴圈顯示元素的元件，例如輪播（幻燈片）。
提示： 外掛可以單獨包含（使用 Bootstrap 的獨立 "carousel.js" 檔案），也可以一次性全部包含（使用 "bootstrap.js" 或 "bootstrap.min.js"）。
輪播示例
注意：Internet Explorer 9 及更早版本無法正確支援輪播（因為它們使用 CSS3 過渡和動畫來實現幻燈片效果）。
如何建立輪播
以下示例展示瞭如何建立一個基本的輪播
示例
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 指示器 -->
<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>
<!-- 滑塊的包裝器 -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="洛杉磯">
</div>
<div class="item">
<img src="chicago.jpg" alt="芝加哥">
</div>
<div class="item">
<img src="ny.jpg" alt="紐約">
</div>
</div>
<!-- 左右控制 -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">上一張</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">下一張</span>
</a>
</div>
自己動手試一試 »
示例解釋
最外層的 <div>
輪播需要使用一個 id（在此示例中為 id="myCarousel"），以便輪播控制元件正常工作。
class="carousel" 指定此 <div> 包含一個輪播。
.slide 類添加了 CSS 過渡和動畫效果，使專案在顯示新專案時滑動。如果您不需要此效果，請省略此類別。
data-ride="carousel" 屬性告訴 Bootstrap 在頁面載入時立即開始動畫輪播。
"指示器" 部分
指示器是每個幻燈片底部的小圓點（表示輪播中有多少張幻燈片，以及使用者當前正在檢視哪張幻燈片）。
指示器在帶有類 .carousel-indicators 的有序列表中指定。
data-target 屬性指向輪播的 id。
data-slide-to 屬性指定點選特定圓點時要跳轉到哪個幻燈片。
"幻燈片容器" 部分
幻燈片在帶有類 .carousel-inner 的 <div> 中指定。
每個幻燈片的內容都在帶有類 .item 的 <div> 中定義。這可以是文字或影像。
.active 類需要新增到其中一張幻燈片中。否則，輪播將不可見。
"左右控制" 部分
此程式碼添加了“左”和“右”按鈕，允許使用者手動在幻燈片之間來回切換。
data-slide 屬性接受關鍵字 "prev" 或 "next"，它們會改變幻燈片相對於其當前位置的位置。
為幻燈片新增標題
在每個 <div class="item"> 中新增 <div class="carousel-caption">，為每張幻燈片建立標題
示例
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 指示器 -->
<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>
<!-- 滑塊的包裝器 -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="夏尼亞">
<div class="carousel-caption">
<h3>洛杉磯</h3>
<p>洛杉磯總是那麼有趣！</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="芝加哥">
<div class="carousel-caption">
<h3>芝加哥</h3>
<p>謝謝你，芝加哥！</p>
</div>
</div>
<div class="item">
<img src="ny.jpg" alt="紐約">
<div class="carousel-caption">
<h3>紐約</h3>
<p>我們熱愛大蘋果！</p>
</div>
</div>
</div>
<!-- 左右控制 -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">上一張</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">下一張</span>
</a>
</div>
自己動手試一試 »
完整的 Bootstrap 輪播參考
有關所有輪播選項、方法和事件的完整參考，請參閱我們的 Bootstrap JS 輪播參考。
