This time I will share jQuery Plugin and tutorial about Ultra Small Responsive jQuery Image Slider – kslider, hope it will help you in programming stack.
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:
1 |
<link href="css/kslider.css" rel="stylesheet"> |
3 |
<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.
01 |
<div id="kslider-wrapper" class="kslider-wrapper"> |
04 |
<img src="1.jpg" alt="Image 1"> |
07 |
<img src="2.jpg" alt="Image 2"> |
10 |
<img src="3.jpg" alt="Image 3"> |
3. Initialize the slider with default options.
3 |
$('.kslider').kslider({}); |
4. Customize the transition speed. Default: 350ms.
1 |
$('.kslider').kslider({ |
5. Customize the autoplay interval. Default: 5000ms.
1 |
$('.kslider').kslider({ |
6. Decide whether to show the navigation controls. Default: true.
1 |
$('.kslider').kslider({ |
7. Decide whether to show the image captions. Default: true.
1 |
$('.kslider').kslider({ |
8. Callback functions available.
1 |
$('.kslider').kslider({ |
2 |
beforeDisplay: function(e, hiddenElement){}, |
3 |
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.
