Slide

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]
    > a

Usage

可以通过两种方式来初始化 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