Ultra Small Responsive jQuery Image Slider - kslider

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

kslider is an ultra-small, fully responsive, easy-to-use, jQuery based slider created for presenting your images in an elegant way.


  • 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="/dist/css/kslider.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/dist/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">
      <img src="2.jpg" alt="Image 2">
      <img src="3.jpg" alt="Image 3">

3. Initialize the slider with default options.




4. Customize the transition speed. Default: 350ms.

  animationSpeed: 500

5. Customize the autoplay interval. Default: 5000ms.

  pause: 3000

6. Decide whether to show the navigation controls. Default: true.

  navigation: true

7. Decide whether to show the image captions. Default: true.

  description: true

8. Callback functions available.

  beforeDisplay: function(e, hiddenElement){},
  afterDisplay: function(e, visibleElement){}



This awesome jQuery plugin is developed by steve-lebleu. For more Advanced Usages, please check the demo page or visit the official website.