jQuery Slider/Carousel Plugin That Uses CSS3 Transitions | KOslider

KOslider is a jQuery slider/carousel plugin that uses CSS3 transitions for its animations.

It was named KOslider because it was initially used in a project with my Kickoff framework and it uses the same [CSS class naming scheme].

How to make use of it:

1. Load KOslider.css for basic scrollbar styles.

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

2. Load the jQuery library and KOslider.js.

<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 the 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. You can also pass options through the options object during initialization.

// 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: {}

Generic Touch-enabled Content Slider, KOslider Plugin/Github


See Demo And Download

Official Website(mrmartineau): Click Here

This superior jQuery/javascript plugin is developed by mrmartineau. For extra advanced usage, please go to the official website.

Share