be-fe/islider

Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App

iSlider

iSlider is a lightweight, high-performant, no library dependencies cross-platform slide controller. It can help handling most sliding effects, offering dozens of transition animations, and presenting various scenarios.

iSlider English README

iSlider DEMO

iSlider 中文文档

iSlider 演示

iSlider animation

Features

• Outstanding performance, less memory usage;
• Various animation effects, including effects such as default, rotate, depth, flow, flip, card, fade, etc., and capability of adding custom animations;
• Provide rich callback trigger. Adding a callback function is easy, regardless of initialization or during operation;
• Easy to configure, e.g. Slide the dampening effect of the cycle, automatic sliding effect, horizontal / vertical sliding, etc.
• Automatic matching the desktop mouse movements or gestures on mobile device. Easy to test and use cross platforms;
• Supports for image pre-loaded, excellent user experience;
• [Plugin] Offers a variety of plug-ins, such as a toggle button, the scene indicator, image scaling, etc. Provides plug-in registration, management and other methods to facilitate custom extension;
• [2.0+] Can be loaded on demand (effect or plug-in);
• [2.0+] Supports more types of elements. Automatically matches the data type. Capable of image recognition and pre-loading;
• [2.0+] Better delegated event management mechanism, optimized memory usage;
• [2.0+] Enriched callback events, more flexible event management and trigger mechanisms;

Mobile demo

Demo http://be-fe.github.io/iSlider/index.html

Get iSlider

Clone from Github

git clone https://github.com/be-fe/iSlider.git

Use bower installation

bower install iSlider

Use npm installation

npm install islider.js

Started iSlider

The easiest way of getting started is to consult our examples, please visit the DEMOs.

Creating a container

<div id="iSlider-wrapper"></div>

Preparing some data

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

Loading iSlider

<script src="iSlider.min.js"></script>

Initializing a iSlider

var islider = new iSlider(document.getElementById('iSlider-wrapper'), data);

Or,

var islider = new iSlider({
    dom : document.getElementById('iSlider-wrapper'),
    data : data
});

var islider = new iSlider(document.getElementById('iSlider-wrapper'), data, {
    dom : document.getElementById('iSlider-wrapper'),
    data : data
});

Extending iSlider

Animations

If you want more effects, you can load the animation effect extensions, set up the configuration when initializing iSlider and specify animationType.

<script src="iSlider.min.js"></script>
<script src="iSlider.animate.min.js"></script>

var islider = new iSlider({
    dom: document.getElementById("iSlider-wrapper"),
    data: list,
    isVertical: true,
    isLooping: false,
    isDebug: true,
    isAutoplay: false,
    animateType: 'rotate'
});

Extension

From 2.x, iSlider supports extension registration. You can now extend iSlide with your own features.

<script src="iSlider.min.js"></script>
<script src="iSlider.plugin.dot.min.js"></script>

var islider = new iSlider({
    dom: document.getElementById("iSlider-wrapper"),
    data: list,
    plugins: ['dot'],
});

You can also pass in more custom params to the extension initialize method.

var islider = new iSlider({
    dom: document.getElementById("iSlider-wrapper"),
    data: list,
    plugins: [['dot', {background:'rgba(0,0,0,0)'}]],
});

That's it!

【Notice】: if you use npm to install iSlider, it will not contain plugin default, you can involve plugin like this:

var iSlider = require('islider.js');
require('../node_modules/islider.js/build/iSlider.plugin.button'); //引入button插件

Official Plugins

Button

Scene toggle button. For switching to the previous (left/up) or next (right/down) scene of the current scene.

Dot

Scene indicator, the current location and switch to a scene function

Zoompic

Mobile image scaling, image in non-background mode by double-clicking on the image or two fingers to enlarge, to amplify the effect of the preview.

• Known issues: must restore the default size by double-clicking, double that currently can not be reduced to its default state

BIZone

Touch points from the edge of the area to identify, although has joined edge processing mouseout and touchcancel, but for some applications, the definition from the top (bottom) menu bar remains powerless. Meaning that it can take the initiative to identify areas of these regions is set to touch on detachment.

Scene data

From 2.x, iSlider no longer requires type to specify the data type. It can now detect wisely, so that you can easily use various types of data, e.g. images, HTML elements, fragments or selectors.

var data = [{
    'content' : './qrcode.png'  // picture
},{
    'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>' // HTML
},{
    'content' : (function () { // element
            var dom = document.createElement('div');
            dom.innerHTML = 'Element';
            return dom;
        })()
},{
    'content' : (function () { // fragment
            var frag = document.createDocumentFragment();
            var dom = document.createElement('div');
            dom.innerHTML = 'Fragment';
            frag.appendChild(dom);
            return frag;
        })()
}{
      'content' : document.getElementById('node') // selectors
}];

To learn more advanced features, please refer to WIKI

iSlider details

Configurations

DOM (Optional, OPTIONS.dom)

• new iSlider(DOM, DATA, OPTIONS);
• {HTMLElement}
• DOM Container
• Though the first parameter is not required, it is highly recommended, as setting a DOM container can make it more convenient to use iSlider.

DATA (Optional, default: OPTIONS.data)

• new iSlider(DOM, DATA, OPTIONS);
• {Array}
• Data list
• Though it's not required, the second param is also recommended.
• Allowed types: URLString, HTMLString, HTMLElement, HTMLFragment.
• TODO: Currently, each of the member in the array is type of {Object}, which only supports content property, in the future, it will get more extensions, such as the configuration of the effect about each scene transitions, wait time, etc.
• Data format:

[
    {
        content:'{URLString|HTMLString|HTMLElement|HTMLFragment}',
    },
    ...
]

OPTIONS

• new iSlider(DOM, DATA, OPTIONS);
• {Object}

dom

• {HTMLElement}
• dom node which is used as Container, same as the role of the parameter [DOM] (#dom), if this has been setted, DOM will be overwritten.

data

• {Array}
• A list of data, same as the role of the parameter [DATA] (#data), if this has been setted, DATA will be overwritten.

animateType

• {String}
• Animation
• Currently supports: default (scrolling), rotate (rotation), depth, flow, flip, card, fade (fade in / hidden), (outside / inside zoom) zoomout
• Precondition: Loading library iSlider.animate(.min).js which is used for effects
• Default: "default"

animateTime

• {Number}
• Animation duration
• Unit: ms
• Default: 1000

animateEasing

• {String}
• Animation curve
• Options: linear, ease, ease-in, ease-out, ease-in-out, even cubic-bezier
• Default: ease

isAutoplay

• {Boolean}
• Turn on / off the automatic sliding mode
• Default: false (Disabled)

duration

• {Number}
• Suspending time of scene when it's playback automatically
• Suspending time of each scene, it switches to the next scene when it is ended
• Unit: ms
• Precondition: isAutoplay === TRUE

wakeupAutoplayDazetime

• {Number}
• User click/tap behavior(eg: active a link), or if the page loses focus will stop autoplay.
• This configuration will attempt to restart autoplay after N milliseconds.
• AutoPlay will be forced to wake up, even when the user fill in a form items !
• It will be blocked by "lock()"
• Unit: ms
• Precondition: isAutoplay === TRUE

isLooping

• {Boolean}
• Repeat Mode
• Default: false (Disabled)

dampingForce

• {Number}
• Damping force, the rebound effect of overflow Scene
• Range: 0 ~ 1, Sliding distance decreases with increasing values (more difficult to slide)
• Default: 0
• Precondition: isLooping === FALSE

isVertical

• {Boolean}
• Vertical sliding mode
• Default: false (Disabled)

isOverspread

• {Boolean}
• Background Tile
• If the scene is picture mode (URL), use the CSS3 backgrounds ways to filling the scenes
• Default: false (Disabled)

isTouchable

• {Boolean}
• Touch events
• Default: true (Enabled)

isDebug

• {Boolean}
• On / off debug mode, it will print more information about the log
• Default: false (Disabled)

initIndex

• {Number}
• Index of the list which is used for the first screen
• Default: 0

fingerRecognitionRange

• {Number}
• The scope of wrong touch, if it's bigger than the value of scope, the touchMove will be treat as an effective distance of slide
• Default：10(px)

fixPage

• {Boolean|Array|String}
• Prevent native event
• Prevent to trigger the event in the scene shield, such as: scroll, drag, zoom, etc.
  • "A" elements, prevented, the mobile terminal is recommended to use user-defined tap (touch-based event jointly judgment)
  • For the form element "SELECT", "INPUT", "TEXTAREA", "BUTTON", "LABEL", in any situations it will not to be prevented
  • *Exclude strategies：if the type of param is string（rule，querySelector selector string）or Array(mutiple regulations)，this option is in opening status(true)and exlude elements with composite regulations, treat asiSlider.FIX_PAGE_TAGS
• Default: true (Enabled)

fillSeam

• {Boolean}
• To fill the gaps between scenes
• There is some rendering problems in the browser of some systems, resulting in a gap between scenes, this situation is particularly evident when the scene had setted the background color and use ** ** for connected.
• Default: false (Disabled)

plugins

• {Array}
• Enable plug-ins and configure the initialization parameters
• Incomming a name list of plugins which would be actived: ['dot', 'button', 'zoompic', ...], in addition, it's support incoming initialization parameters: [..., ['zoompic', {zoomFactor: 2}], ...]
• It will be ignored if the plug-in does not exist or is not loaded

Event callbacks

• {Function}
• Incomming at initialization, it's needed to beginning with on and it would to be Camel-Case
  • OR all lowercase !! Will be discarded, If the Camel-Case or All-Lower-Case coexist, the Camel-Case will be used.
• Binding with method "on" at living example, please use the Camel-Case, refer to the following list.
• *Due to the different scenes,callback method should be different , there will be different between the incoming parameters.

Example:

var S = new iSlider({
	...,
	onSlideChange: callback
	onSlideChanged: callback
	onslidechanged: callBack, // !!All lower case will be abandoned, and now, it will be covered camelCasing
	...
});

// OR
S.on('slideChanged', callBack);

initialize

• Start initialization (After the call setting, Before rendering)
• Parameters: None

initialized

• When initialization is complete (after rendering)
• Parameters: None

pluginInitialize (Not Enabled)

• (Each)Be triggered at initialization
• Parameters: None

pluginInitialized

• Be triggered when all plug-in initialization is complete
• Parameters: None

renderComplete

• Be triggered when the outer container is rendered completely
• Be triggered before reset, loadData
• Parameters
  • {Number} current data index
  • {HTMLElement} current scene elements

slideStart

• Be triggered when the finger touching screen
• Parameters
  • {Object} Event object

slide

• Be triggered when the finger is sliding
• Parameters
  • {Object} Event object

slideEnd

• Be triggered when the finger has lifted
• Parameters
  • {Object} Event object

slideChange

• {Function}
• Be triggered when the scene changes
• Parameters
  • {Number} current data index
  • {HTMLElement} current scene elements

slideChanged

• {Function}
• Be triggered when the changing of scene is completed (the animation is completed)
• Be triggered when executing loadData
• Parameters
  • {Number} current data index
  • {HTMLElement} current scene elements

slideRestore

• {Function}
• Be triggered when the scene has not changed (rebound, animation is completed)
• Parameters
  • {Number} current data index
  • {HTMLElement} current scene elements

slideRestored

• {Function}
• Be triggered when the scene is changing and it's not completed (Rebound animation is completed)
• Be triggered when performing reset
• Parameters
  • {Number} current data index
  • {HTMLElement} current scene elements

loadData

• {Function}
• Be triggered when data is reset (execution loadData method)
• Parameters
  • {Number} current data index
  • {HTMLElement} current scene elements

reset

• {Function}
• Be triggered when the scene reset (phone screen rotate, resize)
• Parameters
  • {Number} current data index
  • {HTMLElement} current scene elements

destroy

• {Function}
• Be triggered when iSlider destruction
• Parameters: None

Constant

VERSION

• {String}
• Version

EVENTS

• {Array}
• The list of events callback

EASING

• {Array}
• Animation effect（easing）regulation lists
  • 0: {Array} ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out']
  • 1: {Regexp} Bézier curve expressions, writting same as the CSS3

FIX_PAGE_TAGS

• {Array}
• The white list which is matched the fixPage form

NODE_TYPE

• {Array}
• Scene type

TRANSITION_END_EVENT

• {String}
• The name of Animation's ending

BROWSER_PREFIX

• {String}
• CSS prefix

DEVICE_EVENTS

• {Object}
• {{hasTouch, startEvt, moveEvt, endEvt, cancelEvt, resizeEvt}}
• According to the event which the divices matched

Static Methods

extend

• When the parameter's length is equal to 1, the object will inherit iSlider.prototype
• When the parameter's length is equal to 2, the second object will inherit the first
• Parameters:
  • [{Object} original object] or default iSlider.prototype
  • {Object} new object

regPlugin

• Register the plug-in
• Parameters:
  • {String} plug-in name
  • {Function} plug-in initialization method

Instance Methods

slideTo

• Switch to the N-th scene, you can set the configuration information in second parameter to change slide animation this time: animateTime animateType
• Parameters:
  • {Number} data list index
  • [{Object} temporary configuration]

slideNext

• Switch to the next scene, you can set the configuration information in second parameter to change slide animation this time: animateTime animateType
• Parameters:
  • [{Object} temporary configuration]

slidePrev

• Switch to the previous scene, you can set the configuration information in second parameter to change slide animation this time: animateTime animateType
• Parameters:
  • [{Object} temporary configuration]

delegate

• Binding delegate event on the container node
• Parameters:
  • {String} event name
  • {String} selector (querySelectorAll)
  • {Function} incident response method

bind

• delegate alias

unDelegate

• Unbundling delegate event handler
• Parameters:
  • {String} event name
  • {String} selector (querySelectorAll)
  • {Function} incident response method

unbind

• UnDelegate alias

on

• To register the callback method in the event of iSlider
• Parameters:
  • {String} event name
  • {Function} back off method
  • [{Boolean}] priority registration, callback events registered to the header of the event queue, the event callback is always be the fisrt which is registered at the initialization, Default: false

has

• Detecting the event callback method is already exists
• Parameters:
  • {String} event name
  • {Function} back off method

off

• Remove the callback method from iSlider events
• Parameters:
  • {String} event
  • {Function} back off method

fire

• Event Trigger

play

• Start Auto Play
• Precondition: isAutoplay === TRUE

pause

• Pause automatic switching
• Precondition: isAutoplay === TRUE

extend

• Same as static method "extend"

regPlugin

• Same as the static method "regPlugin"
• ** This method will be registered the plug-in into the iSlider instance, It will add an active list of plug-in automatically when registeration and performs initialization automatically.**

loadData

• Loading new Datasheets
• Parameters:
  • {Array} Datasheets
  • {Number} Index, default: 0

pushData

• Add scenes to the end of the data datasheets
• Parameters:
  • {Array|Object} A member or additional datasheets

unshiftData

• Add scenes to the head of the data datasheets
• Parameters:
  • {Array|Object} A member or additional datasheets

subjectTo

• Subject to another Slider instance
• This Slider will completely controlled by the target iSlider
• Parameters:
  • {Object} target
  • {Object} controlled configuration item (Not Enabled)

var IS_1 = new iSlider(dom, data);
var IS_2 = new iSlider(dom, data);

IS_1.subjectTo(IS_2);
// At this time IS_1 if fully controlled by IS_2, that is to say the drag, switching, auto-play and other acts performed on IS_2 would synced to IS_1

hold

• Prohibit the current scene gesture

unhold

• The current scene to open gestures, and trigger "unlocked" at the same time

lock

• Lock the current scene, disabled method of sliceTo, slideNext, slidePrev, while prohibiting gesture

unlock

• Unlock

destroy

• Destruction of the current iSlider instance, freeing memory

reset

• Reset the current iSlider instance

Contact us

If you have any questions or find any bugs about iSlider, we will be appreciated for your feedback: Commit a feedback

License (MIT)

Copyright (c) 2014 BE-FE

MIT

islider's Issues

About iSlider

Do not exit the application by pressing the home key to return to the main screen. Once again into the application of carousel images should stay in a position away.

add more animation way for MSlider

maybe 3d slide

问题：请问如何在手指拖动屏幕的时候，不让画面跟着一起动呢？

边缘图片的translateZ是怎么计算出来的？

lz你好
正在学习这个效果
请教个问题
如果不是当前正中间的图片
他的translateZ是怎么算出来的,让图片正好在容器的边缘？？？

add full screen mode

add full screen mode for pic type

Add a simple CSS selector for iSlider

当isOverspread开启的时候，useZoom失效，不合理

现在iPhone那么多分辨率，一张图片，不可能刚好适合屏幕分辨率。

所以一般是默认filled，但是可以缩小，看被挡住的部分。

参考：微信朋友圈的图片浏览功能

新版本在手机上使用时横向浏览模式，下拉会移动图片

作者你好，又来麻烦你了，很抱歉，是这样的我使用的新版本做的杂志浏览，横向浏览模式，但是下拉图片时会出现图片下移，露出浏览器的黑色背景，但使用旧版本的话并不会出现这个问题，下拉图片是不会有反应的，请问这是什么原因导致的呢，我应该怎样去修改达到我想要的效果？

文档有点问题

使用dom哪个地方需要穿个type:'dom'的设置，文档忽略了，这个还是要注意一下

手机适配方面有问题啊

display:-webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
已经淘汰的样式了

Add a documentation for islider & plugin

add desktop support

关于事件绑定的问题

iSlider加载内容的机制导致dom绑定的事件会失效，请教有效解决办法。

官网示例有几处变量声明没注意大小写。

Bug: 你好，我在使用这个插件的时候发现了两个问题。

1、我是用的轮换dom的方式，在安卓手机上面，手指滑动轮换的时候会比较卡顿，ios没有这个问题，浏览器是用的是微信自带浏览器。
2、也是轮换的dom，但是在ios上发现一个问题，页面加载完成之后dom元素没有马上显示出来，而是等我手指触摸之后才显示，安卓没有这个问题。
调用插件的方式：
var list = [
{
content: '',
},{
content: '',
},{
content: '',
},{
content:'',
},{
content:'',
},{
content:'',
},{
content:'',
},{
content:'',
},{
content:'',
},
];
var islider = new iSlider({
type: 'dom',
data: list,
dom: document.getElementById("iSlider-wrapper"),
isLooping: true,
//isDebug: true,
animateType: 'depth'
});
islider.addBtn();

屏幕拉动时的BUG

楼主好，我这边发现一个BUG，就是上下拉动的时候，有时候会叠一下，没拉完全。比如第一页拉第二页的时候，第一页与第二页会有个重叠区域，图片会卡住部分。
http://www.comicool.cn/mob-index.html

zoomIn & zoomOut

how about add zoom In or zoom out

Demo page 404

Another slide/swipe effect

http://gajus.com/sandbox/swing/examples/card-stack/

有关该插件如何获取当前显示图片是哪一张的的解决方案！

你好，我现在在使用这个插件，但是我有个需求，就是在切换图片之后，我想获得这个是第几个图片，我可以怎么获取到呢？

about demo

js最好在demo文件夹中同步一份，否则在demo下用server是跑不起来的，不利于调试

下一个版本的iSlider

当前的iSlider 已经处于1.1版本，比起上一个版本已经增加了多样的动画，增加了全屏模式，桌面支持，具体可参见wiki.下一版我们将加强以下几个方面:

• 增强自定义事件，引入生命周期
• dom type 的内部事件增强
• pic type 的图片zoom-in & zoom-out
• pic type 的图片预加载
• 加强iSlider 与 iscroll共存的兼容
• 增加应用例子
• 使用AMD组织代码，非核心代码按需打包

README.md 文档中有错误的示例代码

ISlider -> iSlider

<script type="text/javascript">
    var mySlider = new ISlider({
        dom : document.getElementById('iSlider-wrapper'),
        data : data
    });
</script>

android设备上页面过渡比较卡

见 http://shiqichan.qiniudn.com/mob.slide.c/simple.html

我打算用于开发电子杂志。发现手头如下设备下卡顿：

• 小米4，比红米都卡
• 红米

另外，在Sony Z3C上，横向滑动的时候，滑动的过程中，当前页面会突然跑到之前页面前面或后面。

请问这个问题是否有人碰到过？

左右切换键需求

虽然手机端的主要交互是滑动，但还是有点击切换的需求，请问基于目前的版本如何实现？是否考虑加上这个扩展？

请问有没有什么办法可以知道当前页是整个动画里的第几页

我现在在用iSlider做一个展示的电子杂志，需要对其中特定页面加一些动画特效，所以想在切到某一页时，知道其在动画中是第几也，也就是页码数i,再配合islider.slideTo(i);即可切到这一页，请问有什么方法吗？

横屏废了

设置首张图片

iSlider貌似没有初始化帧的设置？？？在源码里面看到了slideIndex，但是配置以后不生效，怎么破？？？ 来自http://www.w3cplus.com/resources/1455.html

Next or Previous Slide Function

因为设计需要添加了一个剪头用来指示用户有下一张，但是用户的第一意识是点击那个剪头，如果能提供一个点击方法来达到上一页或下一页就好了。

然后看了源码，JS新手实在看不懂，貌似_slide(1)方法有这个作用，但是不知道怎么调用。

anyway to make it dom reinit?

I want it to be crawable by google.
like instead of giving array of elemnts:

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>'
}];

just preinsert the li elemnt like:

<div id="iSlider-wrapper">
 <div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>
<div><h1>Page2</h1><h2>This is page2</h2><p>page2 is pretty awsome</p><div>
<div><h1>Page3</h1><h2>This is page3</h2><p>page3 is pretty awsome</p><div>
</div>

是否有必要给对象加个this.destroy方法?

写spa（单页面应用）的时候，转场后需要对之前页面的变量、事件、计时器进行内存回收。

这句话的作用是？

你好，问下
boundary = endTime - self.startTime > 300 ? boundary : 14;
这句话的作用是什么，什么情况下会遇到。

请问如何能实现多种效果？

需要做的效果是这样的：向上滑三页，然后向左滑动三页，然后再向上滑三页。请问如何能实现呢？

在wikit内核的安卓浏览器里，似乎没有效果。求解

在wikit内核的安卓浏览器里，似乎没有效果。求解

chrome下动态加载有时候会失效

chrome下动态加载有时候iSlider会失效，控件高度为0且无内容显示，我用的版本是chrome 39

3d & filp animation are against nature

use strict mode

Bug:

islider,在PC端还好，在手机端，用手指拖动的时候，很多时候无效，特别是拇指指慢慢拖动的时候，无效率大于50%！

enhancement -- load image faster

hope to load images resources faster

关于initIndex的使用方法

我在var islider = new iSlider({
dom: document.getElementById("iSlider-show"),
data: domList,
type:'dom',
initIndex: 5;}）的时候添加了initIndex: 5;的属性，但是没有达到我预想的 在刷新页面后，从第5页开始浏览的效果，是我用的方法不对吗，还是有其他原因，希望能帮我解答一下，谢谢！

Bug: 请问demo兼容winPhone吗

Add the function

增加轮播图片中间下方出现数字或者小标的方法，实用性会更好~~

add tearUp animation

请问如何在dom模式下添加<a>

添加了一个url，chrome下模拟无效，请问这是怎么回事？

关掉Android 低版本硬件加速！

官网动画选中状态

官网动画Demo没有选中状态

Bug: 在画面如果有表单的时候，表单Input点击不了，求解决

用了fixepage:true参数，在画面dom如果有表单的时候，表单Input点击不了，求解决，，，，我看了作者的代码，有判断如果点击的是a链接，就用js跳转，是否表单也要这样判断？我觉得就算阻止了画面点击的默认时间，但是画面里面的dom点击默认事件应该不会跟着取消吧，只要不冒泡下去就OK了

Suggestions

• Add a simple profile about MSlider about what's MSlider and what problems MSlider solved
• Improve options introduction (list all usefull parameters)
• Move those examples to BE-FE/MSlider gh-pages and list their link under code introduction
• List two types of data (pic | dom) about MSlider

Support onoritentationchange Event

Bug:

怎么样绑定事件呀，滑动开始，滑动中，滑动结束。