iSlider is an outstanding, dependecy-free sliding js framework for mobile. It is capable of handling any kind of elements, e.g. image, DOM element. It features:
If PC, open the webkit browser for testing
Option | Type | Explanation |
Required | ||
dom | {HTML Element} | Container node |
data | {array} |
data list:
[{ content:'{url|HTML string|element|fragment}', }, ...] |
Options | ||
type (obsolete) | - | - |
duration | {number} | Sets the duration of each scene during auto-play mode. Unit: millis. |
animateType | {string} | Sets the animation type. Currently it could be one of `default`, `rotate`, `depth`, `flow`, `flip` and `card` |
animateTime | {number} | Duration of the animation. Unit: millis. |
animateEasing | {string} | Animation easing function. Possible values are `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out` or customed `cubic-bezier` |
isDebug | {boolean} | If true, more logs will be output. Default: false (disabled) |
isLooping | {boolean} | Turns on/off the loop mode. Default: false (turned off) |
isAutoplay | {boolean} | Turns on/off the auto sliding mode. Default: false (turned off) |
isVertical | {boolean} | Sets vertical/horizontal sliding. Default: false (horizontal) |
isOverspread | {boolean} | Makes the image overspread the whole viewport (as CSS3 `background-size: cover`), if the scene mode is image. Default: false (disabled) |
initIndex | {number} | Specifies an index as the default home scene |
fixPage | {boolean} | Whether to disable native scrolling and rebound effect. Default: true (enable) |
plugins | {array} |
Enables plugins. It could be a simply list of plugin names:
['dot', 'button', 'zoompic', ...] Or, it could be a more complex list which can also contain init params for plugins: [..., ['zoompic', {zoomFactor: 2}], ...] |
Events | ||
onslide | {function} | Gets called on sliding |
onslidestart | {function} | Gets called when the sliding event starts |
onslideend | {function} | Gets called when the sliding event ends |
onslidechange | {function} | Gets called when the scene gets changed |
onslidechanged | {function} | Gets called post scene change (when the transition animation ends) |
onsliderestore | {function} | Gets called if scene restores |
onsliderestored | {function} | Gets called post scene restore (when the rollback animation ends) |
Methods | Params | Explanation |
Static methods | ||
extend |
[{object} The original Object (Optional)]
{object} The new Object |
When the length of params is 1, the param object will be extended to iSlider.prototype
When the length is 2, use the second object as the param object, and extend all it's methods to the first object. |
regPlugin |
{string} Plugin name
{function} Init method for a plugin |
register plugin |
Instance methods | ||
slideTo |
{number} index of a scene
[{object} one-off configuration (optional)] |
Slide to the N scene. Using the one-off configuration param, the transition effect for this particular slide can be specified. i.e. animateTime, animateType |
slideNext | [{object} one-off configuration (optional)] | Slide to the next scene. The one-off configuration can be used to specify the transition effect. i.e. animateTime, animateType |
slidePrev | [{object} one-off configuration (optional)] | Slide to the previous scene. The one-off configration can be used to specify the transition effect. i.e. animateTime, animateType |
delegate |
{string} event name
{string} selector (same syntax as querySelectorAll) {function} event hanlder method |
Bind event handler to a node container |
bind | Alias of delegate | |
unDelegate |
{string} event name
{string} selector (same syntax as querySelectorAll) {function} event hanlder method |
unBind event handler |
unbind | Alias of unDelegate | |
on |
{string} event name
{function} event handler method |
Register event handler for iSlider events
|
off |
{string} event name
{function} event handler method |
Remove an event handler from the registered handlers for a specified event |
fire | {string} event name | Trigger an event manually |
play | Start auto-play (auto-play mode must be specified) | |
pause | Stop auto-play (auto-play mode must be specified) | |
extend | Equivalent to iSlider.extend | |
regPlugin | Equivalent to iSlider.regPlugin. Once registered, the plugin will be added to the active plugin list, and be initialized automatically. | |
loadData | {array} list of data | Loads a list of data |
hold | Prevents the scene from any gesture | |
unhold | Resumes and allows gesture on the current scene | |
lock | Locks the current scene, disables `slideTo`, `slideNext` and `slidePrev` and also disable all gestures. | |
unlock | Unlocks the scene | |
destroy | Destroys the current iSlider instance, and frees memory | |
reset | Resets the current iSlider instance |