iSlider
iSlider is a light-weight, high performance, dependency free, yet cross-platform plugin.
It can help handling most sliding effects, offering dozens of transition animation, and presenting various scenarios.
Currently, it features:
Outstanding performance, less memory required
Various animation effects, and capability of adding custom animations
Easy to configure, e.g. Auto-play, looping, vertical/horizontal sliding etc.
Ability to load features on demand
Numbers of configurable callbacks
Mobile demo
Installation
You can either:
Download directly from Github
Run bower install iSlider if bower is used
Run npm install islider.js
Get started
The easiest way to get your hands dirty is to have a try the cases that we offer. Please refer to the folder demo/ for more information.
Creating a container
Preparing some data
var data = [
{content: "imgs/1.jpg"},
{content: "imgs/2.jpg"},
{content: "imgs/3.jpg"}
];
Loading iSlider
Initializing a iSlider
var islider = new iSlider(document.getElementById('iSlider-wrapper'), data);
you can also
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
});
Options properties precedence over parameters
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.
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.
var islider = new iSlider({
dom: document.getElementById("iSlider-wrapper"),
data: list,
plugins: ['dot'],
});
You can surely pass in more customed 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!
Customise your iSlider
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 or fragments.
var data = [{
'content' : './qrcode.png' // picture
},{
'content' : '
Page1
This is page1
page1 is pretty awsome
},{
'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;
})()
}];
To learn more advanced features, please refer to WIKI
Detailed explanation of the configuration options
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)
More of iSlider
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
slide
slideStart
slideEnd
slideChange
slideChanged
slideRestore
slideRestored
reloadData
destroy
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
Contact us
Any feedback is most welcome if you have any question regarding iSlider or any bug is found:
Commit a feedback
License (MIT)
Copyright (c) 2014 BE-FE