qbaty / islider Goto Github PK

#iSlider，Smooth slider for webapps

####iSlider Official Page ####iSlider 官网 ####iSlider 说明 ####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.
• Support image zoomIn and zoomOut.

##iSlider Mobile Demo

• 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 the demo is only basic usage of iSlider，you can get more from WIKI.

Here provides a clear description of what options you are able to manipulate:

[{
	height: 377,
	width: 600,
	content:"pics/1.jpg"
}]
		

##License (MIT)

Copyright (c) 2014 BE-FE

MIT