Easy Touchable jQuery Image Slider Plugin - Kiss Slider

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

Features:

• 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>
  ...
</ul>

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

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

4. Initialize the slider and done.

$('.kiss-slider').kissSlider({
  prevSelector: '.previous',
  nextSelector: '.next',
  paginationSelector: '.kiss-pagination',
});

5. All default plugin settings.

$('.kiss-slider').kissSlider({

  // 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
$('.kiss-slider').kissSlider('next');

// back to previous slide
$('.kiss-slider').kissSlider('previous');

// 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.
$('.kiss-slider').kissSlider('stopAutoScroll');

// Visually updates slider. Call it after you alter the DOM inside the slider.
$('.kiss-slider').kissSlider('refresh');

// Removes all slides from DOM, except for the current one, and internally updates currentIndex. Does not call refresh().
$('.kiss-slider').kissSlider('clean');

Change log:

2016-05-12

• added more methods.

2016-05-04

• 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.