Bootstrap 輪播


Bootstrap 輪播（Carousel）外掛程式

Bootstrap 輪播（Carousel）外掛程式是一種靈活的響應式的向網站添加滑桿的方式。除此之外，內容也是足夠靈活的，可以是影像、內嵌框架、影片或其他您想要放置的任何類型的內容。

    如果您想要單獨引用該外掛程式的功能，那麼您需要引用 carousel.js。或者，如 Bootstrap 外掛程式概覽 一章所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

實例

下面是一個簡單的投影片，使用 Bootstrap 輪播（Carousel）外掛程式顯示了一個循環播放元素的通用元件。為了實現輪播，您只需要添加帶有該標記的程式碼。不需要使用 data 屬性，只需要簡單的基於 class 的開發即可。

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
   <!-- 轮播（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>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
      </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">‹</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">›</a>
</div> 

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

可選的標題

您可以透過.item 內的.carousel-caption 元素為投影片新增標題。只需要在該處放置任何可選的 HTML 即可，它會自動對齊並格式化。下面的實例示範了這一點：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
   <!-- 轮播（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>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
         <div class="carousel-caption">标题 1</div>
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
         <div class="carousel-caption">标题 2</div>
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
         <div class="carousel-caption">标题 3</div>
      </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">‹</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">›</a>
</div> 


</body>
</html>

#運行實例»##點擊"運行實例" 按鈕查看線上實例

用法

  • 透過data 屬性：使用data 屬性可以輕鬆控制輪播（Carousel）的位置。

    • 屬性

      data-slide 接受關鍵字#prev 或next，用來改變投影片相對於目前位置的位置。

    • 使用

      data-slide-to 來向輪播傳遞一個原始滑動索引，data-slide-to="2" 將把滑桿移到一個特定的索引，索引從0 開始計數。

    • data-ride="carousel" 屬性用來標記輪播在頁面載入時就開始動畫播放。

  • 透過JavaScript：輪播（Carousel）可透過JavaScript 手動調用，如下所示：

$('.carousel').carousel()
#

選項

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

##自動循環每個項目之間延遲的時間量。如果為 false，輪播將不會自動循環。 pausestringdata-pause滑鼠進入時暫停輪播循環，滑鼠離開時恢復輪播循環。 wrapbooleandata-wrap輪播是否連續循環。
選項名稱#類型/預設值#Data 屬性名稱#描述
intervalnumber
預設值：5000		data-interval

預設值："hover"

預設值：true
方法

以下是一些輪播（Carousel）外掛程式中有用的方法：

# #方法.carousel(options).carousel('cycle').carousel('pause').carousel(number).carousel('prev').carousel('next')實例
描述實例
初始化輪播為可選的options 對象，並開始循環專案。 
$('#identifier').carousel({
  interval: 2000
})
從左到右循環輪播專案。 
$('#identifier').carousel('cycle')
停止輪播循環專案。 
$('#identifier').carousel('pause')
循環輪播到某個特定的訊框（從 0 開始計數，與陣列類似）。 
$('#identifier').carousel(number)
迴圈輪到上一個專案。 
$('#identifier').carousel('prev')
循環輪到下一個專案。 
$('#identifier').carousel('next')

下面的實例示範了方法的用法

##實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 轮播（Carousel）插件方法</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
   <!-- 轮播（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>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
      </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">‹</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">›</a>
   <!-- 控制按钮 -->
   <div style="text-align:center;">
      <input type="button" class="btn start-slide" value="Start">
      <input type="button" class="btn pause-slide" value="Pause">
      <input type="button" class="btn prev-slide" value="Previous Slide">
      <input type="button" class="btn next-slide" value="Next Slide">
      <input type="button" class="btn slide-one" value="Slide 1">
      <input type="button" class="btn slide-two" value="Slide 2">            
      <input type="button" class="btn slide-three" value="Slide 3">
   </div>
</div> 
<script>
   $(function(){
      // 初始化轮播
      $(".start-slide").click(function(){
         $("#myCarousel").carousel('cycle');
      });
      // 停止轮播
      $(".pause-slide").click(function(){
         $("#myCarousel").carousel('pause');
      });
      // 循环轮播到上一个项目
      $(".prev-slide").click(function(){
         $("#myCarousel").carousel('prev');
      });
      // 循环轮播到下一个项目
      $(".next-slide").click(function(){
         $("#myCarousel").carousel('next');
      });
      // 循环轮播到某个特定的帧 
      $(".slide-one").click(function(){
         $("#myCarousel").carousel(0);
      });
      $(".slide-two").click(function(){
         $("#myCarousel").carousel(1);
      });
      $(".slide-three").click(function(){
         $("#myCarousel").carousel(2);
      });
   });
</script>


</body>
</html>

執行實例»

#點擊"執行實例"按鈕查看線上實例

事件

#下表列出了輪播（Carousel）插件中要用到的事件。這些事件可在函數中當鉤子使用。

事件描述實例slide.bs.carousel當呼叫slide 實例方法時立即觸發該事件。 
$('#identifier').on('slide.bs.carousel', function () {
  // 执行一些动作...
})
slid.bs.carousel當輪播完成投影片過渡效果時觸發該事件。 
$('#identifier').on('slid.bs.carousel', function () {
  // 执行一些动作...
})
實例
下面的實例示範了事件的用法：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 轮播（Carousel）插件事件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
   <!-- 轮播（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>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
      </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">‹</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">›</a>
</div> 
<script>
   $(function(){
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("当调用 slide 实例方法时立即触发该事件。");
      });
   });
</script>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例


#######################
←
→