@autofe/slide v0.5.0

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 两种方式来配置.

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

$('#slide').on('slid.fe.slide', function (e, slide) {
  // 打印当前是第几帧
  console.log('slid', slide.number);
});

End

Thanks to Bootstrap