Minimal Carousel With Progressbar Paginator - jQuery kslide

kslide is a minimal, automatic carousel slider built with jQuery and CSS3 transforms & transitions.

The plugin automatically generates progress bars as the paginator for the carousel that visualizes the time to wait before transitioning to the next slider.

You can also manually transition between slides by clicking on the progress bars.

How to use it:

1. Add as many slides to the kslide slider.

<div id="kslide">
  <div class="kslide-wrap">
    <div class="kslide-item"></div>
    <div class="kslide-item"></div>
    <div class="kslide-item"></div>
  </div>
</div>

2. Load the minified version of the jQuery kslide plugin after jQuery (slim build).

<script src="https://code.jquery.com/jquery-3.4.0.slim.min.js" 
        integrity="sha384-7WBfQYubrFpye+dGHEeA3fHaTy/wpTFhxdjxqvK04e4orV3z+X4XC4qOX3qnkVC6" 
        crossorigin="anonymous">
</script>
<script src="jquery.kslide.min.js"></script>

3. Just call the function on the top container and the plugin will take care of the rest.

$(function(){
  $('#kslide').kslide({
    // options here
  })
});

4. To config the carousel slider, define the settings by passing an object to the kslide function:

$('#kslide').kslide({

  // height of the carousel
  width : 'auto',

  // time to wait before going to the next slide
  time : 4, 

  // animation speed
  slideTime: 0.5,

  // time to wait before backing to the first slide
  backDelay:0.5,

  // width of the progress bar
  controlItemWidth:40,

  // space between progress bars
  controlItemGap:5,

  // true = left to right
  reverse:false,

  // height of the wrapper
  height : '',

  // enables auto height
  autoHeight:true
  
})

---

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