athm-feSlide
TODO
- Touch 支持
HTML 结构要求
一般情况下使用 .athm-slide-* 风格的类名即可, 但是如果你有自定义的 class 名字，你可以通过配置 data-slide-* 风格的属性来配置对应的节点.
.athm-slide
.athm-slide__inner // overflow: hidden
.athm-slide__track,[data-slide-track] // position: relative; width: 9999em;
> .athm-slide__item,[data-slide-item] // float: left;
a > img[title]
> .athm-slide__item,[data-slide-item] // float: left;
> .athm-slide__item,[data-slide-item] // float: left;
...
.athm-slide__prev,[data-slide-prev]
.athm-slide__next,[data-slide-next]
.athm-slide__indicators,[data-slide-indicators]
> a.active
> a
> a
...
.athm-slide__title,[data-slide-title]
> aUsage
可以通过两种方式来初始化 Slide 控件, 你可以根据自己的需要来进行选择.
$('#slide').slide(options);<div class="athm-slide" data-toggle="slide">
...
</div>Options
参数可以通过 data attributes 或者 JavaScript 两种方式来配置.
| Name | Type | Default | Description |
|---|---|---|---|
| fade | boolean | false | 是否开启 fade 模式 |
| duration | number | 400 | 动画的时长, 以毫秒为单位. |
| interval | number | 5000 | 自动播放间隔时间, 以毫秒为单位. |
| circle | boolean | true | 是否循环. |
| autoplay | boolean | true | 是否开启自动轮播. |
| keyboard | boolean | false | 开启左右快捷键操作, 默认关闭. |
| pause | string or boolean | 'hover' |
鼠标在区域内时暂停循环, 如果想取消改功能, 可以取值 false . |
| toggleButton | boolean | false | 鼠标移入时是否显示左右箭头. |
| autoIndicators | boolean | false | 自动创建导航器 |
Methods
.slide(options)
初始化当前 DOM 内容为一个 Slide , 可以接受参数进行配置.
$('#slide').slide({});.slide('next')
前进到下一帧.
$('#slide').slide('next');.slide('prev')
返回到上一帧.
$('#slide').slide('prev');.slide('pause')
暂停播放.
$('#slide').slide('pause');.slide('play')
开始播放.
$('#slide').slide('play');.slide(number)
前进到第几帧(从1开始).
$('#slide').slide(3);.slide('destroy')
销毁轮播控件.
$('#slide').slide('destroy');Event
| Event Type | Description |
|---|---|
| init.fe.slide | 初始化时触发. |
| slide.fe.slide | 开始切换到下一帧时, 此事件会立即触发. |
| slid.fe.slide | 切换完毕时触发. |
| firstSlide.fe.slide | 开始切换到第一帧时触发, 仅限 circle: false. |
| firstSlid.fe.slide | 完成切换到第一帧时触发, 仅限 circle: false. |
| lastSlide.fe.slide | 开始切换到最后一帧时触发, 仅限 circle: false. |
| lastSlid.fe.slide | 完成切换到最后一帧时触发, 仅限 circle: false. |
$('#slide').on('slid.fe.slide', function (e, slide) {
// 打印当前是第几帧
console.log('slid', slide.number);
});End
Thanks to Bootstrap