/iSlider

Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App

Primary LanguageJavaScriptMIT LicenseMIT

#iSlider,Smooth slider for webapps

####iSlider English Official Page ####iSlider 中文官网 ####iSlider 中文README ####iSlider Example

iSlider is a high performance,dependency free, mobile-platform javascript slider. It can handle any elements that need to be slide, like picture list or different dom elements. It features:

  • Performance is extremely great with hardware acceleration and little memory consumption.
  • Animation can be customized with user defined functions (default, rotate, depth, flow, flip, card).
  • You can easily hook to a plethora of custom events (onslidestart, onslide, onslideend, onslidechange).
  • Damping effect, Infinite Looping, Autometic sliding and Vertical/Horizontal Sliding can be configured.
  • Support desktop gesture which is convenient for testing.
  • Support image preloader to improve user experience.

##iSlider Mobile Demo

##Getting Started The best way to learn the iSlider is by looking at the demos. In the archive you'll find a demo folder. Most of the script features are outlined there. iSlider is a class that needs to be initiated for each dom area.

Before you start, you need to prepare some data for iSlider:

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

HTML structure you only need to prepare is :

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

To make it runnable, all you need to do is to initiate:

<script type="text/javascript">
	var islider = new iSlider({
		dom : document.getElementById('iSlider-wrapper'),
		data : data
	});
</script>

If you want to add more effects or options, you can follow the demo in demo/picture

<script type="text/javascript">
	var islider = new iSlider({
		    data: list,
		    dom: document.getElementById("iSlider-wrapper"),
		    isVertical: true,
		    isLooping: false,
		    isDebug: true,
		    isAutoplay: false,
		    animateType: 'rotate'
	});
</script>

That's it.

##Configure the iSlider Besides the basic ways you can do with iSlider, you can customized the features we provide. For example, if you prefers to put dom elements on the list, you can change the data array like this:

var data = [{
	'height' : '100%',
	'width' : '100%',
	'content' : '<div><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'
},{
	'height' : '100%',
	'width' : '100%',
	'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'
},{
	'height' : '100%',
	'width' : '100%',
	'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</p><div>'
}];

If you hope to implement the effects mentioned in introduction part, you can:

<script type="text/javascript">
	var islider = new iSlider({
		dom : document.getElementById('iSlider-wrapper'),
		data : data,
		duration: 2000,
	    isVertical: true,
	    isLooping: true,
	    isDebug: true,
	    isAutoplay: true
	});
</script>

##Understand The iSlider Here provides a clear description of what options you are able to manipulate:

Option Value Description
dom HTML Object The DOM element that wraps image list
data Array of Content(picture | html) Picture data, for example:
[{
	height: 377,
	width: 600,
	content:"pics/1.jpg"
}]
		
type String (pic | dom) Default value is 'pic', 'dom' is also supported
duration Integer (1000 == 1s) Time gap when an image slides. Applied only to isAutoplay is true
animateType String Currently, default, rotate, flow, depth, flip and card are supported animations
onslide Function Callback function when your finger is moving
onslidestart Function Callback function when your finger touch the screen
onslideend Function Callback function when your finger move out of the screen
onslidechange Function Callback function when the autoplay mode is on and one image slides
isDebug Boolean (true | false) Turn on/off the debug mode. Some debug message will output
isLooping Boolean (true | false) Turn on/off infinite looping mode
isAutoplay Boolean (true | false) Turn of/off autoplay mode
isVertical Boolean (true | fasle) Slide verically or horizontally
isOverspread Boolean (true | fasle) Decide whether to cover the whole browser screen or not

##License (MIT)

Copyright (c) 2014 BE-FE

MIT