Home

Awesome

iSlider

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.

iSlider English README

iSlider DEMO

iSlider 中文文档

iSlider 演示

iSlider animation

Features

Mobile demo

Demo http://be-fe.github.io/iSlider/index.html

Get iSlider

Clone from Github

git clone https://github.com/be-fe/iSlider.git

Use bower installation

bower install iSlider

Use npm installation

npm install islider.js

Started iSlider

The easiest way of getting started is to consult our examples, please visit the DEMOs.

Creating a container

<div id="iSlider-wrapper"></div>

Preparing some data

var data = [
    {content: "imgs/1.jpg"},
    {content: "imgs/2.jpg"},
    {content: "imgs/3.jpg"}
];

Loading iSlider

<script src="iSlider.min.js"></script>

Initializing a iSlider

var islider = new iSlider(document.getElementById('iSlider-wrapper'), data);

Or,

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
});

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.

<script src="iSlider.min.js"></script>
<script src="iSlider.animate.min.js"></script>

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.

<script src="iSlider.min.js"></script>
<script src="iSlider.plugin.dot.min.js"></script>

var islider = new iSlider({
    dom: document.getElementById("iSlider-wrapper"),
    data: list,
    plugins: ['dot'],
});

You can also pass in more custom 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!

【Notice】: if you use npm to install iSlider, it will not contain plugin default, you can involve plugin like this:

var iSlider = require('islider.js');
require('../node_modules/islider.js/build/iSlider.plugin.button'); //引入button插件

Official Plugins

Button

Scene toggle button. For switching to the previous (left/up) or next (right/down) scene of the current scene.

Dot

Scene indicator, the current location and switch to a scene function

Zoompic

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.

BIZone

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.

Scene data

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, fragments or selectors.

var data = [{
    'content' : './qrcode.png'  // picture
},{
    'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>' // 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;
        })()
}{
      'content' : document.getElementById('node') // selectors
}];

To learn more advanced features, please refer to WIKI

iSlider details

Configurations

DOM (Optional, OPTIONS.dom)

DATA (Optional, default: OPTIONS.data)

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

OPTIONS

dom
data
animateType
animateTime
animateEasing
isAutoplay
duration
wakeupAutoplayDazetime
isLooping
dampingForce
<a href="http://be-fe.github.io/static/images/iSlider-notice/dampingForce-origin.png"> <img src="http://be-fe.github.io/static/images/iSlider-notice/dampingForce-thumb.png"/> </a>
isVertical
isOverspread
isTouchable
isDebug
initIndex
fingerRecognitionRange
fixPage
fillSeam
plugins

Event callbacks

Example:

var S = new iSlider({
	...,
	onSlideChange: callback
	onSlideChanged: callback
	onslidechanged: callBack, // !!All lower case will be abandoned, and now, it will be covered camelCasing
	...
});

// OR
S.on('slideChanged', callBack);

initialize

initialized

pluginInitialize (Not Enabled)

pluginInitialized

renderComplete

slideStart

slide

slideEnd

slideChange

slideChanged

slideRestore

slideRestored

loadData

reset

destroy

Constant

VERSION

EVENTS

EASING

FIX_PAGE_TAGS

NODE_TYPE

TRANSITION_END_EVENT

BROWSER_PREFIX

DEVICE_EVENTS

Static Methods

extend

regPlugin

Instance Methods

slideTo

slideNext

slidePrev

delegate

bind

unDelegate

unbind

on

has

off

fire

play

pause

extend

regPlugin

loadData

pushData

unshiftData

subjectTo

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

unhold

lock

unlock

destroy

reset

Contact us

If you have any questions or find any bugs about iSlider, we will be appreciated for your feedback: Commit a feedback

License (MIT)

Copyright (c) 2014 BE-FE

MIT