Ultra Small Responsive jQuery Image Slider - kslider

Ultra Small Responsive jQuery Image Slider - kslider
File Size: 1.29 KB
Views Total: 2425
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.


  • 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">
      <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 konfer-be. For more Advanced Usages, please check the demo page or visit the official website.