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

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

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

<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);

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.

<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 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' : '<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

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)

MIT

ywany / islider Goto Github PK

islider's Introduction