zxylvlp / MSlider

a mobile side image slider

iSlider，Smooth slider for webapps

iSlider English Official Page

iSlider 中文官网

iSlider 中文README

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:

• Animation can be customized with user defined functions (default, rotate, flip, depth).
• 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.

Demo of iSlider

• 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: 300,
	width: 414,
	content: "imgs/1.jpg",
},{
	height: 300,
	width: 414,
	content: "imgs/2.jpg",
},{
 	height: 300,
	width: 414,
 	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, flip and depth 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

License (MIT)

Copyright (c) 2014 BE-FE

MIT