目录

Bootstrap - 折叠插件( Collapse Plugin)

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接受关键字prevnext ,这会改变相对于其当前位置的幻灯片位置。

    • 使用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>
新页面打开
↑回到顶部↑
WIKI教程 @2018