iSlider专注于移动端的滑动解决方案

iSlider是一个表现出众，轻量且高性能，无任何库依赖的跨平台滑动控件。它能够处理大多数的滑动场景，提供多种切换动画效果，展示多种类型的场景。

特性

• 优秀的性能，更少的内存占用；
• 提供丰富的动画切换效果，自带的效果包括 default, rotate, depth, flow, flip, card, fade 等，并且可以进行无限的扩展；
• 提供丰富的回调触发器，并且添加回调函数极为方便，无论在初始化还是运行过程中；
• 支持滑动衰减效果，循环效果，自动滑动效果，水平/垂直滑动等众多参数，且功能皆可配置；
• 自动适配桌面鼠标动作与移动端手势，方便测试与跨平台使用；
• 支持图片预加载，优秀的用户体验；
• [插件] 提供多种插件，如切换按钮、场景指示器、图片缩放等，提供插件注册、管理等方法方便自定义扩展；
• [2.0+] 可以按需加载需要的功能（效果 或 插件）；
• [2.0+] 支持更多种类的元素置入，自动匹配数据类型，识别图片并进行预加载；
• [2.0+] 更完善的代理事件管理机制，优化内存占用；
• [2.0+] 更加丰富的回调事件，更灵活的事件管理、触发机制。

而使用iSlider也非常容易上手，你只需要准备一个dom节点用来存放你的slider：

var data = [{
    height: 414,
    width: 300,
    content: "imgs/1.jpg",
},{
    height: 414,
    width: 300,
    content: "imgs/2.jpg",
},{
    height: 414,
    width: 300,
    content: "imgs/3.jpg",
}];

然后你需要准备展示的数据，这里展示的数据分两种类型，拿图片类型的slider 举例，你只需要准备好的是图片的json 数据，数据格式如下:

var data = [{
    'height' : '100%',
    'width' : '100%',
    'content' : '<div><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'
},{
    'height' : '100%',
    'width' : '100%',
    'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'
},{
    'height' : '100%',
    'width' : '100%',
    'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</p><div>'
}];

调用时候，需要对iSlider 实例化：

<script type="text/javascript">
    var islider = new iSlider({
        dom : document.getElementById('iSlider-wrapper'),
        data : data,
        duration: 2000,
        isVertical: true,
        isLooping: true,
        isDebug: true,
        isAutoplay: true
    });
</script>

这样就可以运行一个iSlider 的实例了，关于上面一些参数的意义，可以在官网看到：

http://be-fe.github.io/iSlider/

• iSlider 的依赖：iSlider 不依赖任何库或是框架，你可以很轻松的把他用在自己的项目中，不会和zepto 或是jqmobi 冲突。

• 体积大小：iSlider 压缩后代码2kb，你可以很随意的打包在你的项目中。

• 性能上：iSlider借助了手机硬件加速，所有的动画都尽可能重用dom ，并且使用尽可能少dom 来完成整个渲染，支持无尽的滚动，并且在手指快速滑动中也达到流畅的体验。