Lean Slider

Download v1.0
Fork on Github

The Lean Slider is a simple jQuery image slider built on the principles of Progressive Enhancement. Unlike other sliders it does not provide any styling or fancy transition effects. It simply provides a javascript framework (slideshow functionality, navigation controls, callback functions etc.) for you to build a slider on top of.

The idea is that you provide your own styling and transition styles in the form of CSS styles and transitions. This is not for beginners and will require a solid knowledge of up-to-date web development practices to make the Lean Slider look good.

The Lean Slider is a result of taking our years of experience building the Nivo Slider and stripping it down to the bare minimum to provide a responsive, flexible, extensible and future proof image slider for serious web developers.

Requirements

Works in all major browsers including IE9+. Requires jQuery v1.8.

Usage

Include the required files.

<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" />

Add some markup. All top level elements inside the slider div are assumed to be "slides".

<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>

Hook up the jQuery.

$(document).ready(function() {
    $('#slider').leanSlider();
});

Providing Controls & Styles

Without providing any styles or options the Lean Slider will simply show a slideshow and hide/show individual slides. To add direction navigation (previous/next) and control navigation (1,2,3...) you need to specify selector strings for existing elements using the directionNav and controlNav options.

To add transition effects and styles to the slider you need to provide your own CSS. See the sample-styles.css stylesheet we've created for our slider above to get an idea of how to style the slider.

API Documentation

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){
    // ...       
}

Credits & License

The Lean Slider was created by Gilbert Pellegrom from Dev7studios and released under the MIT license. Images © Pixar.