Simple jQuery > 3.1.1. slider plugin.
https://fabrik.konfer.be/kslider/
Github page: https://steve-lebleu.github.io/kslider/
> $ npm i kslider --save
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({});
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