Skip to content

wubaibai/SproutSlide-jQuery-Plugin

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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