html5 app list,GitHub - hupan508/iSlider: Smooth mobile touch slider for Mobile WebApp, HTML5 App, H...-CSDN博客

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

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

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

{string} event name

{function} event handler method

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

Any feedback is most welcome if you have any question regarding iSlider or any bug is found:

Commit a feedback

License (MIT)