is

ice-skating

轻量级的滑动插件

Showing:

Popularity

Downloads/wk

4

GitHub Stars

15

Maintenance

Last Commit

4yrs ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

1.8KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

ice-skating

提供基础功能轻量级的滑块插件。大约250行代码,支持ie10+以上的标准浏览器。

思考过程:滑动效果的原理及实践一个滑动小插件

example

例子的源码位于example文件中

install

npm:

$ npm install ice-skating --save

Usage

基本的HTML结构:


<div class="ice-container">
    <div class="ice-wrapper" id="myIceId">
        <div class="ice-slide">Slide 1</div>
        <div class="ice-slide">Slide 2</div>
        <div class="ice-slide">Slide 3</div>
    </div>
</div>

引入js:

//ES2015
import { iceSkating } from 'ice-skating'
//CommonJS
var iceSkating = require('ice-skating').iceSkating
//Browser globals
//iceSkating.js位于dist文件中
<script src="path/to/iceSkating.js"></script>

初始化:

new iceSkating(parameters);
  • parameters是一个传递初始化参数的对象。
//example
var myIce = new iceSkating({
       containerId: '#myIceId'
   });

parameters

参数类型默认描述
containerIdstringnull必须。指定需要位移的容器元素ID,如同上面例子的'#myIceId'
animationDurationnumber300单位ms,动画的持续时间
autoPlaybooleanfalse是否进行自动轮播
autoplayDelaynumber3000单位ms,每次轮播的间隔时间
touchRationumber1滑动系数,滑块的移动距离 = 触摸距离 * 滑动系数
directionstringx滑动方向,默认水平方向,y为垂直方向
criticalnumber0.1触发切换滑块的系数,例如0.1,只要移动当前滑块宽度的10%以上才会触发切换
preventClicksbooleantrue是否禁止容器上的点击事件
fastClickTimenumber300单位ms,判定此次操作为点击的最大时间,只要操作时间小于这个值,都认为是点击
clickCallbackfunctionnull判定为点击操作时执行此函数
iceEndCallBackfunctionnull每次动画结束时执行此函数

实例提供的方法:

  • getIndex

取得当前滑块的索引,索引从0开始。

//example
var myIce = new iceSkating({
       containerId: '#myIceId'
   });
var  currIndex = myIce.getIndex(); // 0 
  • moveToIndex(index)

index是一个number类型的索引参数,调用后会立即切换到相应的滑块。

//example
var myIce = new iceSkating({
       containerId: '#myIceId'
   });
myIce.getIndex(); // 0 
myIce.moveToIndex(1);
myIce.getIndex(); // 1

使用这两个方法可以实现点击按钮切换滑块的效果

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100