iSlider is expected to be used in mobile terminal.
iSlider simulates the sliding behavior in mobile terminal.It's lightweight but can meet your demand to deal with the touch,scroll,swipe and etc.
Based on iSlider,lots of UI can be implemented.Enjoy~ -_-"
- Refer to the demo:
$ pwd
/path/iSlider
$ npm install
$ grunt defaultdemo can be seen in demo folder
- Get compressed file:
$ grunt distnew compressed file can be found in 'dist' folder
-
Steps to init:
-
inlude js file to your page
<head> <script type="text/javascript" src="../dist/iSlider.min.js"></script> </head>
-
basic html structure
<div id="your_container" class="container"> <div class="wrap">your content</div> </div>
-
basic stylesheet
.container{ position: relative; width: 360px; height: 640px; overflow: hidden; } .wrap{ position: absolute; top: 0; left: 0; width: 100%; }
-
init an iSlider component
```javascript
var oSlider = new ISlider('#your_container', settings);
```
after init one iSlider component like:
var oSlider = new ISlider('#your_container', settings);settings should be a JSON object like {direction: 'y'}
var settings = {
/**
* value:'x' or 'y', set the direction to slide in the viewport,default is 'y'.
*/
direction: value
/**
* value:true or false, whether to use the default scrolling of the browser in the opposite direction.
*/
oppositeSlide: value
/**
* value:true or false, whether to lock the other direction.
* only one direction is available for all of the iSlider components.
* that means if one direction was locked,other iSlider components won't be scrollable in the opposite direction.
*/
lockTheOtherDirection: value
/**
* value:0 or other number, the initial 'x' position of the slider.
*/
startX: value
/**
* value:0 or other number, the initial 'x' position of the slider.
*/
startY: value
}some api is available after init a oSlider object:
oSlider.goWithTouchStart = function (x, y){
some code here;
}goWithTouchStart will be executed when the touch start event emitted.
x and y is the position of the slider which will be passed in when executed.
oSlider.goWithTouchMove = function (x, y){
some code here;
}goWithTouchMove is like the usage above,but executed when the touch move event emitted.
oSlider.goWithTouchEnd = function (x, y, inertia){
some code here;
}goWithTouchEnd is like the usage above,but executed when the touch end event emitted.
additional: the parameter inertia is the destination position of the inertia.and if there's no inertia,null will be its value.
oSlider.moveTo(x, y);move to the specific destination.this's just a 'translate' and no animation.
'x','y' are the destination position.
oSlider.animateTo(startPos, rightPos, duration, curve);animate to the specific destination.
startPos the start position of this animation.
rightPos the destination position.
duration the duration is optional(milliseconds),there's a default value.
curve the animation curve object is optional,there's a default value.Other value is expected from Math.tween.
oSlider.resize();'slider' will recalculate the width and height of viewport and if its position is not right it will adjust to get a right position.
oSlider.updateRightPosition();adjust the postion of 'slider' to the right one.you know,'slider' may be out of boundary in some situations.
oSlider.stopInertia();stop to amend for right position automatically.and stop 'inertia'.that means the slider will stop after touch move and no functions will be executed after touch end fired.
oSlider.stopInertia();resume to amend right position automatically.and resume 'inertia' effect.
only part of the api is detailed here.other can be referred to the notation in source code.
iSlider is licensed under the MIT license. (http://opensource.org/licenses/MIT)
Any issues pls submit in github or contact me by mail([email protected]).