Easy Customizable jQuery Slideshow Plugin - Sprout Slide

Sprout Slide is an easy-to-use jQuery slideshow plugin for presenting your Html content in an elegant way.

Features:

• Simple, lightweight
• Fully customizable via CSS and JS options.
• Touch swipe supported.
• Slide or fade transition effects.
• Autoplay on page load.
• Infinite scroll like a carousel.

Basic Usage:

1. Load the necessary jQuery library and jQuery touchSwipe plugin in the Html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.touchSwipe.js"></script>

2. Load the jQuery Sprout Slide plugin's JavaScript and CSS after jQuery library.

<script src="sprout-slide/sprout-slide.js"></script>
<link rel="stylesheet" href="sprout-slide/sprout-slide.css">

3. Markup Html structure.

<div class="sprout-slide-container" id="my-slideshow">
  <div class="sprout-slide-wrapper">
    <ul class="sprout-slide">
      <li>
        Slide 1
      </li>
      <li>
        Slide 2
      </li>
      <li>
        Slide 3
      </li>
    </ul>
  </div>
  <div class="sprout-arrow">
    <div class="sprout-prev"></div>
    <div class="sprout-next"></div>
  </div>
  <div class="sprout-dots"> </div>
</div>

4. Initialize the plugin and set the options to the slideshow.

$('#my-slideshow').sproutSlide({

// slide or fade
animateStyle: "fade",

// the width of the slideshow
width: 720,

// animation speed
duration:500,

// autoplay
autovalue:false,

// autoplay interval
interval:5000,

// Dots navigation
enableDot:true,

// Arrows navigation
enableArrow:true,

// Page number
enablePageNo:false,

// Mouse hover to show arrows navitaion
hoverShowArrow:true,

// Click the slide to goto next
clickToNext:true

});

5. Callback functions.

$('#my-slideshow').sproutSlide({

onInit:false,
beforeAnimate:false,
afterAnimate:false

});

Change log:

2015-04-26

• modify clicktonext bug with unbind

---

This awesome jQuery plugin is developed by wubaibai. For more Advanced Usages, please check the demo page or visit the official website.