support 'mible swipe gesture' 'mutiple slide' 'pagenation' 'next & previous' 'autoplay' 'Infinite Scroll' feature.
- 2014-07-23
- Fixed only 2 page wired animation.
- 2014-05-31
- support Mobile Swipe Gesture.
- 2013-12-29
- NEW Version Sprout Slide Release. With Infinite Scroll Feature!!!
Sample
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="https://lab.25sprout.com/library/jquery/jquery-1.9.0.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, // Slide Visible content width; //Default (960)
'slideNum': 4, // One Page Slide li number; //Default (4)
'duration':700, // Animation Speed; //Default (700)
'autovalue':true, // Auto play control (true/false); //Default (true)
'interval':4000 // Auto play interval; //Default (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>
