Simple jQuery Image Slider - Lean Slider

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.