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.