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
Demo http://be-fe.github.io/iSlider/index.html
You can either:
- Download directly from Github
- Run
bower install iSlider
if bower is used - Run
npm install islider.js
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.
<div id="iSlider-wrapper"></div>
var data = [
{content: "imgs/1.jpg"},
{content: "imgs/2.jpg"},
{content: "imgs/3.jpg"}
];
<script src="iSlider.min.js"></script>
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
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'
});
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 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!
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' : '<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;
})()
}];
To learn more advanced features, please refer to WIKI
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 |
Any feedback is most welcome if you have any question regarding iSlider or any bug is found: Commit a feedback
Copyright (c) 2014 BE-FE