Ultra Small Responsive jQuery Image Slider - kslider
File Size: | 1.29 KB |
---|---|
Views Total: | 2583 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

kslider is an ultra-small, fully responsive, easy-to-use, jQuery based slider created for presenting your images in an elegant way.
Features:
- Auto adjusts the height/width depending on the screen size.
- Auto shows/hides navigation arrows on hover.
- Auto creates image captions from img's
alt
attribute. - Auto transitions between images at a certain speed.
- Infinite loop just like a carousel.
How to use it:
1. Add references to jQuery library and the kslider's files as follows:
<link href="css/kslider.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="js/jquery.kslider.min.js"></script>
2. Insert your images to an HTML unordered list and define the image captions in the alt
attribute.
<div id="kslider-wrapper" class="kslider-wrapper"> <ul class="kslider"> <li class="active"> <img src="1.jpg" alt="Image 1"> </li> <li> <img src="2.jpg" alt="Image 2"> </li> <li> <img src="3.jpg" alt="Image 3"> </li> ... </ul> </div>
3. Initialize the slider with default options.
$(function(){ $('.kslider').kslider({}); });
4. Customize the transition speed. Default: 350ms.
$('.kslider').kslider({ animationSpeed: 500 });
5. Customize the autoplay interval. Default: 5000ms.
$('.kslider').kslider({ pause: 3000 });
6. Decide whether to show the navigation controls. Default: true.
$('.kslider').kslider({ navigation: true });
7. Decide whether to show the image captions. Default: true.
$('.kslider').kslider({ description: true });
8. Callback functions available.
$('.kslider').kslider({ beforeDisplay: function(e, hiddenElement){}, afterDisplay: function(e, visibleElement){} });
This awesome jQuery plugin is developed by konfer-be. For more Advanced Usages, please check the demo page or visit the official website.