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.

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="/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">
    </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){}
});

Changelog:

2024-01-25

• Updated package

---

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