Simple jQuery Image Slider - Lean Slider
File Size: | 630 KB |
---|---|
Views Total: | 7476 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Lean Slider is a Simple jQuery Image Slider Plugin that does not provide any styling or fancy transition effects. So it is very easy to use.
Usage:
1. Include necessary elements in your head section
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="lean-slider.js"></script> <link rel="stylesheet" href="lean-slider.css" type="text/css" />
2. Markup
<div id="slider"> <div class="slide1"> <img src="images/1.jpg" alt="" /> </div> <div class="slide2"> <img src="images/2.jpg" alt="" /> <p>Add content in here.</p> </div> ... </div>
3. Call the plugin
$(document).ready(function() { $('#slider').leanSlider(); });
4. API & Options
//Available options. pauseTime: 4000, // the delay between each slide, false to turn off slideshow pauseOnHover: true, // pause the slideshow on hover startSlide: 0, // zero based index of starting slide directionNav: '', // selector string for directionNav element directionNavPrevBuilder: '', // function to override directionNav "prev" output directionNavNextBuilder: '', // function to override directionNav "next" output controlNav: '', // selector string for controlNav element controlNavBuilder: '', // function to override controlNav "next" output prevText: 'Prev', // text for the "prev" directionNav element nextText: 'Next', // text for the "next" directionNav element beforeChange: function(){}, // beforeChange callback afterChange: function(){}, // afterChange callback afterLoad: function(){} // afterLoad callback // You can use the utility "Builder" functions to override the default output for the directionNav and controlNav. directionNavPrevBuilder: function(prevText){ return '<a href="#" class="lean-slider-prev">'+ prevText +'</a>'; } directionNavNextBuilder: function(nextText){ return '<a href="#" class="lean-slider-prev">'+ nextText +'</a>'; } controlNavBuilder: function(index, slide){ return '<a href="#" class="lean-slider-control-nav">'+ (index + 1) +'</a>'; } // Both the beforeChange and afterChange callbacks have the current slide index as a parameter. beforeChange: function(currentSlide){ // ... }
This awesome jQuery plugin is developed by gilbitron. For more Advanced Usages, please check the demo page or visit the official website.