折叠插件（Collapse Plugin）

优质

小牛编辑

132浏览

2023-12-01

Bootstrap轮播是一种灵活，响应迅速的方式，可以为您的网站添加滑块。除了响应之外，内容还非常灵活，可以提供图片，iframe，视频或您可能想要的任何类型的内容。

如果您想单独包含此插件功能，那么您将需要carousel.js 。另外，如Bootstrap插件概述一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js 。

例子 (Example)

下面的简单幻灯片显示了使用Bootstrap carousel插件循环浏览元素（如轮播）的通用组件。要实现轮播，只需添加带有标记的代码即可。不需要数据属性，只需简单的基于类的开发。

<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">‹</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</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">‹</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>+
</div>

用法 (Usage)

Via data attributes - 使用数据属性轻松控制轮播的位置。
- 属性data-slide接受关键字prev或next ，这会改变相对于其当前位置的幻灯片位置。
- 使用data-slide-to将原始幻灯片索引传递给轮播data-slide-to = "2" ，这会将幻灯片位置移动到以0开头的特定索引。
- data-ride = "carousel"属性用于将轮播标记为从页面加载开始的动画。
Via JavaScript - 可以使用JavaScript手动调用轮播，如下所示 -

$('.carousel').carousel()

选项 (Options)

可以通过数据属性或JavaScript传递的某些选项列在下表中 -

选项名称	类型/默认值	数据属性名称	描述
interval	数字Default − 5000	data-interval	自动循环项目之间的延迟时间。如果为false，轮播将不会自动循环。
pause	字符串Default − "hover"	data-pause	在mouseenter上暂停旋转木马的循环，并在mouseleave上恢复旋转木马的循环。
wrap	boolean Default − true	data-wrap	转盘是否应连续循环或硬停。

方法 (Methods)

以下是可与旋转木马代码一起使用的有用方法列表。

方法	描述	例
.carousel(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')`

例子 (Example)

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

<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">‹</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</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>

事件 (Events)

Bootstrap的carousel类公开了两个事件，用于挂钩到下面列出的轮播功能。

事件	描述	例
slide.bs.carousel	调用幻灯片实例方法时，将立即触发此事件。	`$('#identifier').on('slide.bs.carousel', function () { // do something })`
slid.bs.carousel	当轮播完成滑动过渡时会触发此事件。	`$('#identifier').on('slid.bs.carousel', function () { // do something })`

例子 (Example)

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

<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">‹</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>
</div> 
<script>
   $(function() {
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>