Sprout Slide
support 'mutiple slide' 'pagenation' 'next & previous' 'autoplay' feature.

2013-12-11 Update sprout-slide.js, fixed duplicated function;
2013-12-09 Update sprout-slide.js, fixed autoplay sequence problem;

Sample

// sproutSlide(element,width,slideNum,duration,autovalue,interval);
sproutSlide('#slide1',960,4,700,true,3000);

  • You can add caption

  • You can put any thing in 'li'

  • You can cutomize css

  • Hope you like it.

  • You can add caption

  • You can put any thing in 'li'

  • You can cutomize css
Click to Download view sample

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="sprout-slide/jquery-1.7.2.min.js"></script>

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

<!-- Initial It!! -->
<script type="text/javascript">
	$(document).ready(function() {
		// sproutSlide(element,width,slideNum,duration,autovalue,interval);
		// element  : Slider's ID or class
		// width    : Slider's width 
		// slideNum : 'li' number per Page 
		// duration : animation's speed
		// autoplay : true or false
		// interval : autoplay interval
		sproutSlide('#slide1',960,4,700,true,3000);
	});
</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>...</li>
		</ul>
	</div>
	<div class="sprout-arrow">
		<div class="sprout-prev"></div>
		<div class="sprout-next"></div>
	</div>
	<div class="sprout-dots">
	</div>
</div>

LEAVE COMMENTS