Ultra simple jQuery slider Download


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>

Finally, initialize the plugin at DOM ready :

$(document).ready(function() {


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