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