Generic Touch-enabled Content Slider Plugin - KOslider

KOslider is a simple jQuery slider for creating touch-enabled and heavily customizable content slider/carousel with subtle animations powered by CSS3 transitions.

Basic usage:

1. Load the KOslider.css for core slider styles.

<link rel="stylesheet" href="dist/KOslider.css">

2. Load jQuery library and the KOslider.js at the end of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="dist/jquery-KOslider.js"></script>

3. Create a list of content slides for the slider and use data-koslider attribute to set the options.

<div class="KOsliderContainer" data-koslider='{OPTIONS HERE}'>

  <ul class="KOslider">
    <li class="KOslider-slide">
      <div class="eq-wrapper"> Slide 1 </div>
    </li>
    <li class="KOslider-slide">
      <div class="eq-wrapper"> Slide 2 </div>
    </li>
    <li class="KOslider-slide">
      <div class="eq-wrapper"> Slide 3 </div>
    </li>
  </ul>
  
</div>

4. That's it. You can also pass the options via options object during initialization. Full plugin options:

// keyboard shortcuts
keys: false,

// display bullets pagination
dots: true,

// enable clickable dots
dotsClick : false,

// display prev/next arrows
arrows: true,

// slides container selector
sliderEl: '.KOslider',

// slidable items selector
slide: '.KOslider-slide',

// 'before', 'after' or 'over'
uiPosition: 'before',

// classname for prev button icon
customPrevBtnClass : undefined,

// classname for next button icon
customNextBtnClass : undefined,

// show debug info
debug: false,

// "auto" = Change height of slides according to content; 
// "equal" = equalise height of all slides; 
// "none" = don't adjust height at all
setHeight: "auto",

// autoplay the slider
autoplay: false,

// change the autoplay speed
autoplayInterval: 4000,

// enable swipe for touch
swipe: false,

// define an element width instead of calculating it
itemWidth: undefined,

// classname for inactive slide
inactiveClass: 'KOslider--inactive',

// classname for active slide
activeClass: 'KOslider--active',

// add custom callbacks
callbacks: {}

---

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