Ultra Small Responsive jQuery Image Slider - kslider

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

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

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