This project has been archived and is not longer maintened.

kslider.js

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