iSlider Demo

iSlider

iSlider English Demo page
iSlider DEMO

iSlider是一个表现出众,无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素,例如图片或者DOM元素。它有如下特性:

  • 性能极好,硬件加速,极小占用内存
  • 能够自定义动画,自带的动画包括 default, rotate, depth, flow, flip, card, fade 等
  • 你能够简易地添加回调函数(islider.on('eventType', callback))
  • 支持滑动衰减效果,循环效果,自动滑动效果,水平/垂直滑动
  • 自动适配桌面鼠标动作与移动端手势,方便测试与跨平台使用
  • 支持图片预加载,改善用户体验
  • [Plugin]支持手势缩放,解决图片太大无法看清问题
  • [2.0+]支持更多种类的元素置入,自动匹配场景类型,识别图片并预加载
  • [2.0+]更完善的代理事件管理机制,优化内存占用

iSlider 结构说明

  • iSlider.js: iSlider核心代码库,定义iSlider类,绑定touch事件,图片预加载逻辑,以及图片翻页逻辑
  • iSlider.animate.js: islider滑动效果库,目前支持flip、depth、flow等翻页效果。 demo地址
  • iSlider.plugin.dot.js: 支持在图片上添加页码标示,支持点击翻页,以...展示。 demo地址
  • iSlider.plugin.button.js: 支持在图片上添加页码标示,支持点击翻页,以左右图标展示。 demo地址
  • iSlider.plugin.zoompic.js: 针对type为pic类型的滑动元素提供的手势缩放功能,支持android和ios中手势缩放功能,同时支持边缘检测。 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