Bootstrap - 輪播外掛

上一頁
下一頁

Bootstrap 輪播是一個靈活且響應式的滑塊解決方案，可以輕鬆新增到您的網站中。除了響應式之外，其內容也非常靈活，可以包含圖片、iframe、影片或您可能需要的任何其他型別的 內容。

如果您想單獨包含此外掛的功能，則需要 carousel.js 檔案。否則，如在章節 Bootstrap 外掛概述 中所述，您可以包含 bootstrap.js 或壓縮版本 bootstrap.min.js。

示例

以下是一個簡單的幻燈片演示，它展示了一個通用的元件，用於使用 Bootstrap 輪播外掛迴圈遍歷元素，就像輪播一樣。要實現輪播，您只需新增帶有標記的程式碼即可。無需使用資料屬性，只需進行簡單的基於類的開發。

即時演示 
<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
</div>

可選標題

您可以使用任何 .item 內的 .carousel-caption 元素輕鬆地為幻燈片新增標題。在其中放置任何可選的 HTML，它將自動對齊和格式化。以下示例演示了這一點 -

即時演示 
<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
         <div class = "carousel-caption">This Caption 1</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
         <div class = "carousel-caption">This Caption 2</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
         <div class = "carousel-caption">This Caption 3</div>
      </div>
   </div>
   
   <!-- Carousel nav --> 
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>+
</div>

用法

  • 透過資料屬性 - 使用資料屬性輕鬆控制輪播的位置。

    • 屬性 data-slide 接受關鍵字 prev 或 next，它會更改幻燈片相對於其當前位置的位置。

    • 使用 data-slide-to 將原始幻燈片索引傳遞給輪播 data-slide-to = "2"，它會將幻燈片位置更改為特定的索引，從 0 開始。

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

  • 透過 JavaScript - 輪播可以透過以下 JavaScript 手動呼叫 -

$('.carousel').carousel()

選項

以下表格列出了可以透過資料屬性或 JavaScript 傳遞的某些選項 -

選項名稱 型別/預設值 資料屬性名稱 描述
interval 數字 預設 - 5000 data-interval 自動迴圈專案之間延遲的時間。如果為 false，則輪播將不會自動迴圈。
pause 字串 預設 - "hover" data-pause 在滑鼠懸停時暫停輪播的迴圈，並在滑鼠離開時恢復輪播的迴圈。
wrap 布林值 預設 - true data-wrap 輪播是否應連續迴圈或具有硬停止。

方法

以下是可用於輪播程式碼的一些有用方法。

方法 描述 示例
.carousel(options) 使用可選的 options 物件初始化輪播並開始迴圈遍歷專案。 
$('#identifier').carousel({
   interval: 2000
})
.carousel('cycle') 從左到右迴圈遍歷輪播專案。 
$('#identifier').carousel('cycle')
.carousel('pause') 停止輪播迴圈遍歷專案。 
$('#identifier')..carousel('pause')
.carousel(number) 將輪播迴圈到特定的幀（從 0 開始，類似於陣列）。 
$('#identifier').carousel(number)
.carousel('prev') 迴圈到上一項。 
$('#identifier').carousel('prev')
.carousel('next') 迴圈到下一項。 
$('#identifier').carousel('next')

示例

以下示例演示了方法的用法 -

即時演示 
<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
   <!-- Controls buttons -->
   <div style = "text-align:center;">
      <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() {
	
      // Cycles to the previous item
      $(".prev-slide").click(function() {
         $("#myCarousel").carousel('prev');
      });
      
      // Cycles to the next item
      $(".next-slide").click(function() {
         $("#myCarousel").carousel('next');
      });
      
      // Cycles the carousel to a particular frame 
      $(".slide-one").click(function() {
         $("#myCarousel").carousel(0);
      });
      
      $(".slide-two").click(function() {
         $("#myCarousel").carousel(1);
      });
      
      $(".slide-three").click(function() {
         $("#myCarousel").carousel(2);
      });
   });
</script>

事件

Bootstrap 的輪播類公開了兩個事件，用於掛接到輪播功能中，這些事件列在以下表格中。

事件 描述 示例
slide.bs.carousel 當呼叫 slide 例項方法時，此事件會立即觸發。 
$('#identifier').on('slide.bs.carousel', function () {
   // do something
})
slid.bs.carousel 當輪播完成其滑動過渡時，會觸發此事件。 
$('#identifier').on('slid.bs.carousel', function () {
   // do something
})

示例

以下示例演示了事件的用法 -

即時演示 
<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
	
</div> 

<script>
   $(function() {
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>
列印頁面
上一頁
下一頁
廣告