iSlider Demo

iSlider

iSlider 中文演示页
iSlider DEMO

iSlider is an outstanding, dependecy-free sliding js framework for mobile. It is capable of handling any kind of elements, e.g. image, DOM element. It features:

  • Highly performant, hardware acceleration, least memory usage.
  • Able to customise animations. Built-in animations include default, rotate, depth, flow, flip, card, fade etc.
  • You can easily add a callback function (islider.on('eventType', callback))
  • Supports ease-out sliding, looping, auto-sliding, horizontal/vertical sliding
  • Responsive to both mouse events and mobile gestures. Feasible in cross-platform scenarios
  • Pre-loading enabled to enhancement user experience
  • [Plugin] Supports pinch to zoom, in case the image is too huge to view
  • [2.0+] Supports more types of embeded elements. Auto detects the scenario, recognises the image and pre loads.
  • [2.0+] Better delegate event system, lessen memory usage

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: provides pinching for zooming for element with type of 'pic', supports android and ios' native zooming gestures, and also auto detects the edge. demo地址

iSlider DEMO

If PC, open the webkit browser for testing

Animation Effects

demo code

                    
                    
                

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

Methods

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