使用方法一:通过data属性可以很容易的控制轮播的定位。 data-slide
可以接受控制播放位置的
prev
或 next
关键字。另外,还可以通过 data-slide-to
传递以 0
开始的幻灯片下标。 data-ride="carousel"
属性用来标记在页面加载之后即开始启动的轮播组件。
使用方法二:通过js手动启动轮播组件: $('.carousel').carousel()
使用方法一:通过data属性可以很容易的控制轮播的定位。 data-slide
可以接受控制播放位置的
prev
或 next
关键字。另外,还可以通过 data-slide-to
传递以 0
开始的幻灯片下标。 data-ride="carousel"
属性用来标记在页面加载之后即开始启动的轮播组件。
使用方法二:通过js手动启动轮播组件: $('.carousel').carousel()
<div id="myNiceCarousel" class="carousel slide" data-ride="carousel">
<!-- 圆点指示器 -->
<ol class="carousel-indicators">
<li data-target="#myNiceCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myNiceCarousel" data-slide-to="1"></li>
<li data-target="#myNiceCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播项目 -->
<div class="carousel-inner">
<div class="item active">
<img alt="First slide" src="http://zui.sexy/docs/img/slide1.jpg">
<div class="carousel-caption">
<h3>我是第一张幻灯片</h3>
<p>:)</p>
</div>
</div>
<div class="item">
<img alt="Second slide" src="http://zui.sexy/docs/img/slide2.jpg">
<div class="carousel-caption">
<h3>我是第二张幻灯片</h3>
<p>0.0</p>
</div>
</div>
<div class="item">
<img alt="Third slide" src="http://zui.sexy/docs/img/slide3.jpg">
<div class="carousel-caption">
<h3>我是第三张幻灯片</h3>
<p>最后一张咯~</p>
</div>
</div>
</div>
<!-- 项目切换按钮 -->
<a class="left carousel-control" href="#myNiceCarousel" data-slide="prev">
<span class="icon icon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myNiceCarousel" data-slide="next">
<span class="icon icon-chevron-right"></span>
</a>
</div>
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到 data-
之后,例如 data-interval=""
。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
interval | number | 5000 | 幻灯片轮换的等待时间。如果为false,轮播将不会自动开始循环。 |
pause | string | "hover" | 鼠标停留在幻灯片区域即暂停轮播,鼠标离开即启动轮播。 |
wrap | boolean | true | 轮播是否持续循环。 |
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到 data-
之后,例如 data-interval=""
。
方法 | 描述 |
---|---|
.carousel(options) |
初始化轮播组件,接受一个可选的object类型的options参数,并开始幻灯片循环。 |
.carousel('cycle') |
从左到右循环各帧。 |
.carousel('pause') |
停止轮播。 |
.carousel(number) |
将轮播定位到指定的帧上(帧下标以0开始,类似数组)。 |
.carousel('pre') |
返回上一帧。 |
.carousel('next') |
转到下一帧。 |
事件类型 | 描述 |
---|---|
slide.zui.carousel | 此事件在 slide 方法被调用之后立即出发。 |
slide.zui.carousel | 当所有幻灯片播放完之后被触发。 |
$('#myCarousel').on('slide.zui.carousel',
function() {// do something…}) |