kSlider - An ultra-simple jQuery slider plugin

kSlider is an ultra-simple jQuery slider plugin

Demo

http://jquery.konfer.be/kslider/

Installation

Obvious install with Bower :

$ bower install lslider --save

How to use ?

In your HTML page, between tags, retrieve styles:

<link href="path_to_kslider_css" rel="stylesheet" type="text/css" />

In your HTML page, between tags, retrieve jQuery and kslider :

<script src="directory_of_your_jquery/jquery.js"></script> <script src="directory_of_your_completer/jquery.kslider.js"></script>

Into your HTML code, place the following code and replace/add your own images :

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

Invoke the plugin :

$('.kslider').kslider({});

Options

Following options are available :

• animationSpeed: int, speed of the animation (ms)
• pause: int, duration of one slide transition (ms)
• navigation: boolean, using navigation
• description: boolean, display alt attribute as description
• beforeDisplay: function(e, hiddenElement), function, callback fired before display of image
• afterDisplay: function(e, visibleElement), function, callback fired after display of image