Easy Customizable jQuery Slideshow Plugin - Sprout Slide

Easy Customizable jQuery Slideshow Plugin - Sprout Slide
File Size: 808 KB
Views Total: 1418
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.