iSlider

iSlider 中文演示
iSlider DEMO

Summary

Detail

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+] Better delegated event management mechanism, optimized memory usage;
• [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

iSlider DEMO

If PC, open the webkit browser for testing

Animation Effects

demo code

Initialize

new iSlider(DOM, DATA, OPTIONS)

DOM

• new iSlider(DOM, DATA, OPTIONS);
• {HTMLElement}
• DOM Container
• Though the first parameter is not required, it is highly recommended, as setting a DOM container can make it more convenient to use iSlider.

DATA

• new iSlider(DOM, DATA, OPTIONS);
• {Array}
• Data list
• Though it’s not required, the second param is also recommended.
• Allowed types: URLString, HTMLString, HTMLElement, HTMLFragment.
• 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.
• Data format:

[
    {
        content: '{URLString|HTMLString|HTMLElement|HTMLFragment}'
    },
    ...
]

OPTIONS

new iSlider(DOM, DATA, OPTIONS);

Type: {Object}

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)
• Parameters
  • {Number} current data index
  • {HTMLElement} current scene elements

destroy

• {Function}
• Be triggered when iSlider destruction
• Parameters: None

Constant

VERSION

• {String}
• Version

EVENTS

• {Array}
• The list of events callback

EASING

• {Array}
• Animation effect（easing）regulation lists
  • 0: {Array} ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out']
  • 1: {Regexp} Bézier curve expressions, writting same as the CSS3

FIX_PAGE_TAGS

• {Array}
• The white list which is matched the fixPage form

NODE_TYPE

• {Array}
• Scene type

TRANSITION_END_EVENT

• {String}
• The name of Animation’s ending

DEVICE_EVENTS

• {Object}
• {{hasTouch, startEvt, moveEvt, endEvt, cancelEvt, resizeEvt}}
• According to the event which the divices matched

Static Method

Static Methods

Instance Methods

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