Easy Touchable jQuery Image Slider Plugin - Kiss Slider

Easy Touchable jQuery Image Slider Plugin - Kiss Slider
File Size: 10.1 KB
Views Total: 1288
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Kiss Slider is a simple, flexible, cross-platform jQuery slider/slideshow plugin for presenting your images in an elegant way.


  • Fast, smooth slide animations.
  • Auto scroll.
  • Numeric pagination.
  • Responsive design and touch enabled.
  • Custom easing effects.
  • Minimal html markup requirement.

How to use it:

1. First of all, add jQuery and jQuery Kiss Slider plugin's script into your webpage.

<script src="//code.jquery.com/jquery.min.js"></script> 
<script src="jquery.kiss-slider.js"></script> 

2. Create a list of images for the slider.

<ul class="kiss-slider">
  <li><img src="1.jpg" /></li>
  <li><img src="2.jpg" /></li>
  <li><img src="3.jpg" /></li>

3. Add the pagination and navigation buttons to the slider.

<ul class="kiss-pagination">
<button type="button" class="previous">&larr; previous</button>
<button type="button" class="next">next &rarr;</button>

4. Initialize the slider and done.

  prevSelector: '.previous',
  nextSelector: '.next',
  paginationSelector: '.kiss-pagination',

5. All default plugin settings.


  // Selector for the slides. 
  // If null, get the direct children
  slideSelector: null,  

  // Selector for the next button.
  nextSelector: null,

  // Selector for the previous button.
  prevSelector: null,

  // Selector for the pagination
  paginationSelector: null,  

  // What to display before each pagination link.
  paginationBefore: '',   // '<li>'

  // What to display after each pagination link.
  paginationAfter: '',    // '</li>'

  // Classname for the current pagination link
  paginationCurrentClass: 'current',

  // 0-based index of the slide to display first
  startIndex: 0,

  // z-index for the slides. 
  // Usefull if the slider have to display on top of other things
  startingZ: 1,    

  // Duration of the sliding animation 
  slideDuration: 400,

  // Easing for the sliding animation.
  easing: 'swing',

  // Autoscroll delay
  autoscrollDelay: 0,

  // Do not animate the slider
  noAnim: false,

  // Do not disable autoscroll when mouse is over the slideshow
  alwaysAutoscroll: false,

  // callback parameters : oldIndex, newIndex.
  beforeSlide: null,    

  // callback parameters : oldIndex, newIndex.
  afterSlide: null,   

  // calls when the slider is ready
  init: null,       

  // Allow swipe on touch-enabled devices
  allowSwipe: true    

6. Public methods.

// goto next slide

// back to previous slide

// move to slide 3
$('.kiss-slider').kissSlider('moveTo', {index:2});

// Start autmatic scrolling of slides.
$('.kiss-slider').kissSlider('startAutoScroll', 1000);

// Stop automatic scrolling of slides.

// Visually updates slider. Call it after you alter the DOM inside the slider.

// Removes all slides from DOM, except for the current one, and internally updates currentIndex. Does not call refresh().

Change log:


  • added more methods.


  • added startAutoScroll and stopAutoScroll actions

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