iSlider is a lightweight, high-performant, no library dependencies cross-platform slide controller. It can help handling most sliding effects, offering dozens of transition animations, and presenting various scenarios.
Features
Outstanding performance, less memory usage;
Various animation effects, including effects such as default, rotate, depth, flow, flip, card, fade, etc., and capability of adding custom animations;
Provide rich callback trigger. Adding a callback function is easy, regardless of initialization or during operation;
Easy to configure, e.g. Slide the dampening effect of the cycle, automatic sliding effect, horizontal / vertical sliding, etc.
Automatic matching the desktop mouse movements or gestures on mobile device. Easy to test and use cross platforms;
Supports for image pre-loaded, excellent user experience;
[Plugin] Offers a variety of plug-ins, such as a toggle button, the scene indicator, image scaling, etc. Provides plug-in registration, management and other methods to facilitate custom extension;
[2.0+] Can be loaded on demand (effect or plug-in);
[2.0+] Supports more types of elements. Automatically matches the data type. Capable of image recognition and pre-loading;
[2.0+] Enriched callback events, more flexible event management and trigger mechanisms;
iSlider Architecture
iSlider.js
iSlider core, which defines class iSlider, binds touch event, implements image pre-loading and image transitions.
iSlider.animate.js
sliding animiation library. At the moment, it supports flip、depth、flow etc.
demo
iSlider.plugin.dot.js
supports page annotations over image, and tap to switch, present with "...".
demo
iSlider.plugin.button.js
supports page annotations over image, and tap to switch, present with left/right icons
demo
iSlider.plugin.zoompic.js
Mobile image scaling, image in non-background mode by double-clicking on the image or two fingers to enlarge, to amplify the effect of the preview.
Known issues: must restore the default size by double-clicking, double that currently can not be reduced to its default state
demo
iSlider.plugin.BIZone.js
Touch points from the edge of the area to identify, although has joined edge processing mouseout and touchcancel, but for some applications, the definition from the top (bottom) menu bar remains powerless. Meaning that it can take the initiative to identify areas of these regions is set to touch on detachment.
demo
TODO: Currently, each of the member in the array is type of {Object}, which only supports content property, in the future, it will get more extensions, such as the configuration of the effect about each scene transitions, wait time, etc.
dom node which is used as Container, same as the role of the parameter DOM, if this has been setted, DOM will be overwritten.
data
{Array}
A list of data, same as the role of the parameter DATA, if this has been setted, DATA will be overwritten.
animateType
{String}
Animation
Currently supports: default (scrolling), rotate (rotation), depth, flow, flip, card, fade (fade in / hidden), (outside / inside zoom) zoomout
Precondition: Loading library iSlider.animate(.min).js which is used for effects
Default: “default”
animateTime
{Number}
Animation duration
Unit: ms
Default: 1000
animateEasing
{String}
Animation curve
Options: linear, ease, ease-in, ease-out, ease-in-out, even cubic-bezier
Default: ease
isAutoplay
{Boolean}
Turn on / off the automatic sliding mode
Default: false (Disabled)
duration
{Number}
Suspending time of scene when it’s playback automatically
Suspending time of each scene, it switches to the next scene when it is ended
Unit: ms
Precondition: isAutoplay === TRUE
isLooping
{Boolean}
Repeat Mode
Default: false (Disabled)
isVertical
{Boolean}
Vertical sliding mode
Default: false (Disabled)
isOverspread
{Boolean}
Background Tile
If the scene is picture mode (URL), use the CSS3 backgrounds ways to filling the scenes
Default: false (Disabled)
isTouchable
{Boolean}
Touch events
Default: true (Enabled)
isDebug
{Boolean}
On / off debug mode, it will print more information about the log
Default: false (Disabled)
initIndex
{Number}
Index of the list which is used for the first screen
Default: 0
fingerRecognitionRange
{Number}
The scope of wrong touch, if it’s bigger than the value of scope, the touchMove will be treat as an effective distance of slide
Default:10(px)
fixPage
{Boolean|Array|String}
Prevent native event
Prevent to trigger the event in the scene shield, such as: scroll, drag, zoom, etc.
“A” elements, prevented, the mobile terminal is recommended to use user-defined tap (touch-based event jointly judgment)
For the form element “SELECT”, “INPUT”, “TEXTAREA”, “BUTTON”, “LABEL”, in any situations it will not to be prevented
*Exclude strategies:if the type of param is string(rule,querySelector selector string)or Array(mutiple regulations),this option is in opening status(true)and exlude elements with composite regulations, treat asiSlider.FIX_PAGE_TAGS
Default: true (Enabled)
fillSeam
{Boolean}
To fill the gaps between scenes
There is some rendering problems in the browser of some systems, resulting in a gap between scenes, this situation is particularly evident when the scene had setted the background color and use switching effect for connected.
Default: false (Disabled)
plugins
{Array}
Enable plug-ins and configure the initialization parameters
Incomming a name list of plugins which would be actived: ['dot', 'button', 'zoompic', ...], in addition, it’s support incoming initialization parameters: [..., ['zoompic', {zoomFactor: 2}], ...]
It will be ignored if the plug-in does not exist or is not loaded
Event callbacks
{Function}
Incomming at initialization, it can also registrat event by way of living example with method “on”.
As the initialization parameter it’s needed to beginning with on and it would to be lowercase, Camel-Case would be used for binding.
Due to the different scenes,callback method should be different , there will be different between the incoming parameters.
Example:
var S = new iSlider({..., onslidechanged: callBack, ...});
S.on('slideChanged', callBack);
initialize
Start initialization (After the call setting, Before rendering)
Parameters: None
initialized
When initialization is complete (after rendering)
Parameters: None
pluginInitialize (Not Enabled)
(Each)Be triggered at initialization
Parameters: None
pluginInitialized
Be triggered when all plug-in initialization is complete
Parameters: None
renderComplete
Be triggered when the outer container is rendered completely
Be triggered before reset, loadData
Parameters
{Number} current data index
{HTMLElement} current scene elements
slideStart
Be triggered when the finger touching screen
Parameters
{Object} Event object
slide
Be triggered when the finger is sliding
Parameters
{Object} Event object
slideEnd
Be triggered when the finger has lifted
Parameters
{Object} Event object
slideChange
{Function}
Be triggered when the scene changes
Parameters
{Number} current data index
{HTMLElement} current scene elements
slideChanged
{Function}
Be triggered when the changing of scene is completed (the animation is completed)
Be triggered when executing loadData
Parameters
{Number} current data index
{HTMLElement} current scene elements
slideRestore
{Function}
Be triggered when the scene has not changed (rebound, animation is completed)
Parameters
{Number} current data index
{HTMLElement} current scene elements
slideRestored
{Function}
Be triggered when the scene is changing and it’s not completed (Rebound animation is completed)
Be triggered when performing reset
Parameters
{Number} current data index
{HTMLElement} current scene elements
loadData
{Function}
Be triggered when data is reset (execution loadData method)
Parameters
{Number} current data index
{HTMLElement} current scene elements
reset
{Function}
Be triggered when the scene reset (phone screen rotate, resize)
When the parameter’s length is equal to 1, the object will inherit iSlider.prototype
When the parameter’s length is equal to 2, the second object will inherit the first
Parameters:
[{Object} original object] or default iSlider.prototype
{Object} new object
regPlugin
Register the plug-in
Parameters:
{String} plug-in name
{Function} plug-in initialization method
Instance Methods
slideTo
Switch to the N-th scene, you can set the configuration information in second parameter to change slide animation this time: animateTime animateType
Parameters:
{Number} data list index
[{Object} temporary configuration]
slidePrev
Switch to the next scene, you can set the configuration information in second parameter to change slide animation this time: animateTime animateType
Parameters:
[{Object} temporary configuration]
slidePrev
Switch to the previous scene, you can set the configuration information in second parameter to change slide animation this time: animateTime animateType
Parameters:
[{Object} temporary configuration]
delegate
Binding delegate event on the container node
Parameters:
{String} event name
{String} selector (querySelectorAll)
{Function} incident response method
bind
delegate alias
unDelegate
Unbundling delegate event handler
Parameters:
{String} event name
{String} selector (querySelectorAll)
{Function} incident response method
unbind
UnDelegate alias
on
To register the callback method in the event of iSlider
Parameters:
{String} event name
{Function} back off method
[{Boolean}] priority registration, callback events registered to the header of the event queue, the event callback is always be the fisrt which is registered at the initialization, Default: false
has
Detecting the event callback method is already exists
Parameters:
{String} event name
{Function} back off method
off
Remove the callback method from iSlider events
Parameters:
{String} event
{Function} back off method
fire
Event Trigger
play
Start Auto Play
Precondition: isAutoplay === TRUE
pause
Pause automatic switching
Precondition: isAutoplay === TRUE
extend
Same as static method “extend”
regPlugin
Same as the static method “regPlugin”
** This method will be registered the plug-in into the iSlider instance,It will add an active list of plug-in automatically when registeration and performs initialization automatically.**
loadData
Loading new Datasheets
Parameters:
{Array} Datasheets
pushData
Add scenes to the end of the data datasheets
Parameters:
{Array|Object} A member or additional datasheets
subjectTo
Subject to another Slider instance
This Slider will completely controlled by the target iSlider
var IS_1 = new iSlider(dom, data);
var IS_2 = new iSlider(dom, data);
IS_1.subjectTo(IS_2); // At this time IS_1 if fully controlled by IS_2, that is to say the drag, switching, auto-play and other acts performed on IS_2 would synced to IS_1
hold
Prohibit the current scene gesture
unhold
The current scene to open gestures, and trigger “unlocked” at the same time
lock
Lock the current scene, disabled method of sliceTo, slideNext, slidePrev, while prohibiting gesture
unlock
Unlock
destroy
Destruction of the current iSlider instance, freeing memory