kslider.js

Ultra simple jQuery slider Download

Installation

With Bower :

    
$ bower install kslider --save
    

How to use ?

In your HTML page, between <head> tags, import CSS from css/kslider.css

    
<link href="css/kslider.css" rel="stylesheet" type="text/css" media="screen" />
    

Next, import JavaScript files js/jquery.min.js and js/jquery.kslider.min.js :

    
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.kslider.min.js"></script>
    

Puts the following HTML code in your page :

    
<div id="kslider-wrapper" class="kslider-wrapper">
    <ul class="kslider">
        <li class="active"><img src="img/item-1.jpg" alt="Damned, pirates are in the square" /></li> <!-- Add your own images here -->
        <li><img src="img/item-2.jpg" alt="Light rays penetrating the forest" /></li>
        <li><img src="img/item-3.jpg" alt="Mountains on the horizon" /></li>
        <li><img src="img/item-4.jpg" alt="Sunset on a lake" /></li>
    </ul>
</div>
    

Finally, initialize the plugin at DOM ready :

    
$(document).ready(function() {
    $('.kslider').kslider({});
});
    

Options

Parameter Type Definition Values Default
animationSpeed int Animation speed to display image (ms) * 350
pause int Duration of one slide transition (ms) * 5000
navigation boolean Use navigation true|false true
description boolean Display alt attribute as description true|false true
beforeDisplay function Callback fired before display image function function(e, hiddenElement) { }
afterDisplay function Callback fired after display image function function(e, visibleElement) { }