SproutSlide-jQuery-Plugin

Sample 1

joshuaearle
joshuaearle
joshuaearle
joshuaearle
joshuaearle
joshuaearle
joshuaearle

$('#slide1').sproutSlide({
	animateStyle: "slide",
	width: "auto",
	slideNum: 3,
	duration:700,
	autovalue:true,
	interval:4000,
	enableDot:true,
	enableArrow:true,
	enableLoop:false,
	enablePageNo:true,
	hoverShowArrow:false,
	onInit:function(slider,current,total){
		slider.find('.customize-page-text').html('IMAGES: '+(current+1)+' / '+total);
	},
	beforeAnimate:function(slider,current,total){
		slider.find('.customize-page-text').html('IMAGES: '+(current+1)+' / '+total);
	}
});

Sample 2

joshuaearle
joshuaearle
joshuaearle
joshuaearle

$('#slide2').sproutSlide({
	animateStyle: "fade",
	width: 720,
	duration:500,
	autovalue:true,
	interval:5000,
	enableDot:true,
	enableArrow:true,
	enablePageNo:false,
	hoverShowArrow:true,
	clickToNext:true
});

Implement

Please do not add any padding and margin to 'li'.
If you want each 'li' has margin to another, please put 'div' in 'li', and set margin to the 'div'.

<!-- Don't forgot jquery, if your site already have it, it's no need to include again.-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<!-- KEY FEATURE SPROUT SLIDE -->
<script type="text/javascript" src="sprout-slide/sprout-slide.js"></script>
<script type="text/javascript" src="sprout-slide/jquery.touchSwipe.js"></script>
<link type="text/css" rel="stylesheet" href="sprout-slide/sprout-slide.css">

<!-- Initial It!! -->
<script type="text/javascript">
	$(document).ready(function() {
		// $(element).sproutSlide(options);
		$('#slide1').sproutSlide({
			'width': 900,
			...
		});
	});
</script>

<!-- Place HTML -->
<!-- YOU CAN MODIFY ID "slide1" -->
<div class="sprout-slide-container" id="slide1">
	<div class="sprout-slide-wrapper">
		<ul class="sprout-slide">
			<li><div>...</div></li>
			<li><div>...</div></li>
		</ul>
	</div>
	<div class="sprout-arrow">
		<div class="sprout-prev"></div>
		<div class="sprout-next"></div>
	</div>
	<div class="sprout-dots">
	</div>
</div>

Options

Property	Default	Description
animateStyle	"slide"	The style of slider "slide" : The Slider will slide Left and Right to animate. "fade" : The Slider will fade in or fade out to animate.
width	"auto"	The width of slider content "auto" : The Slider will fit container's width. digits : The Slider will set to specific width.
height	"auto"	The height of slider contentm especially for 'fade' effect slide, if the image haven't load the height will be inncorrect, so you can use this setting to set height. "auto" : The Slider will fit container's height. digits : The Slider will set to specific height.
slideNum	4	The li number per page This only works for animateStyle : "slide"
duration	700	The Animation duration(ms).
autovalue	true	Set to true, the slider will autoplay to next automatically.
interval	3000	The time(ms) of autoplay speed.
Layout
enableDot	true	Show the pagenation dots or not.
enableArrow	true	Show the left and right arrow or not.
enablePageNo	false	Show the page number in dots or not.
enableLoop	true	Make the Slider infinite scroll, if set to false : The prev button will hide at page first. The next button will hide at page end.
hoverShowArrow	false	Set to true will hide the arrow when initial the slide, but fadeIn when you hover in the slide.
clickToNext	false	Set to true will trigger next slide when you click on the slider, and cursor will be set to pointer.
Callback
onInit	false	The callback function after slider initial slider : will return the slider itself. current : will return the current page number start form 0 ~ (total-1). total : will return the slider page count. onInit:function(slider,current,total){ }
beforeAnimate	false	The callback function before each slider animation. EX: before next action, before previous action, before dot action. slider : will return the slider itself. current : will return the current page number start form 0 ~ (total-1). total : will return the slider page count. beforeAnimate:function(slider,current,total){ }
afterAnimate	false	The callback function after each slider animation. EX: after next action, after previous action, after dot action. slider : will return the slider itself. current : will return the current page number start form 0 ~ (total-1). total : will return the slider page count. afterAnimate:function(slider,current,total){ }