Skip to content

wubaibai/SproutSlide-jQuery-Plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SproutSlide-jQuery-Plugin

SproutSlide is a simple jQuery plugin, it is very easy to customize into yout website.

Version

Changelog

  • v2.1.6 - June 22, 2016
    • Update jquerySwipe core version, thanks to Matt Bryson. Enable click event on "a" element
  • v2.1.6 - June 3, 2016
    • 'fade' Style with a image load lately bug of slider height, will auto update height until image load.
  • v2.1.5 - Nov 4, 2015
    • ADD 'height' setting for cusomize Fade Effect Slider Height.
  • v2.1.4 - Apr 25, 2015
    • FIX 'fade' style beforeAnimate current number incorrect.
    • FIX clicktonext duplicated binding problem.
  • v2.1.3 - Mar 5, 2015
    • FIX one page still have arrow problem.
  • v2.1.2 - Jan 21, 2015
    • FIX Click will failed on mobile device.
    • FIX Arrow Click will failed on mobile device.
    • Modify Default CSS.
  • v2.1.1 - Jan 19, 2015
    • FIX enableLoop true, let it will always show arrows.
    • ADD Vertical website Scrolling on slider.
  • v2.1.0 - Dec 22, 2014
    • ADD more function and fade style.
    • ADD Callback after and before animation.
  • v2.0.0 - Jul 23, 2014
    • Fixed only 2 page wired animation.
  • v2.0.0 - May 31, 2014
    • support Mobile Swipe Gesture.
  • v2.0.0 - Dec 29, 2013
    • NEW Version Sprout Slide Release. With Infinite Scroll Feature!!!

In This Documentation

  1. Getting Started
  2. Options & Settings

Getting Started

1. Include SproutSlider on your site.

<!-- 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">

SproutSlider included touchswipe.js to detect mobile gesture.

2. Add the markup to your 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>

[sprout-slide-container] 's id is changeable, you also can use class instead.

[sprout-dots] will dynamically add navigation elements and slide position content to them.

3. Initialize Slider.

<script type="text/javascript">
	$(document).ready(function() {
		$('#slide1').sproutSlide(options);
	});
</script>

Options and Settings

Please check document at SproutSlide-jQuery-Plugin.

About

SproutSlide-jQuery-Plugin is a javascript library to make a customizable slider.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published