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>
打印页面
上一页
下一页
广告

© . All rights reserved.