Cross-Platform Content Slider Library – TouchSlider

TouchSlider is a versatile, responsive, customizable, cross-browser/platform and highly performant content slider library designed for both desktop and mobile webpages.

Features:

• Supports mouse wheel, keyboard, touch swipe and mouse drag.
• Supports both vertical and horizontal modes.
• Supports any content with different sizes.
• Autoplay and pause on hover.
• Fully stylable via your own CSS experience.
• Fullscreen modes is supported as well.
• Works perfect on mobile, desktop and tablet.
• Dead simple to use.
• Pure JavaScript. No 3rd dependencies.

How to use it:

Insert your slide content into an html unodered list like this:

<ul id='slider'>
  <li>Slide 1</li>
  <li>Slide 2</li>
  <li>Slide 3</li>
  <li>Slide 4</li>
  <li>Slide 5</li>
  ...
</ul>

Load the touchslider.js script at the end of the html document to improve the page load speed.

<script src="touchslider.js"></script>

Create a new TouchSlider object with default options.

new TouchSlider('slider');

Config the content slider with the following options.

new TouchSlider('slider',{
  // sliding duration
  duration:600, 
  // 1: vertical
  // 2: horizontal
  direction:1,
  // initial slide
  start:0, 
  // left(top) center(middle) right(bottom)
  align:'center', 
  // enable mouse drag
  mouse:true, 
  // enable mouse wheel
  mousewheel:false, 
  // enable arrow keys
  arrowkey:false,
  // fullsize mode
  fullsize:true,
  // autoplay
  autoplay:true, 
  // autoplay interval
  interval:int
  
});

API.

var ts=new TouchSlider('slider')
// prev slide
ts.prev();
// next slide
ts.next(); 
// goto n slide
ts.slide(n); 
// play
ts.play(); 
// pause
ts.pause(); 
// add a new slide
ts.prepend(DOM_NODE);
ts.append(DOM_NODE);
ts.insertBefore(DOM_NODE,index);
ts.insertAfter(DOM_NODE,index); 
// remove a slide
ts.remove(index); 
// is static
ts.isStatic();
// destroy the instance
ts.destroy();

Events.

// before 
// after 
// dragStart
// dragMove
// dragEnd
ts.on(event,callback);

Changelog:

v2.0.4 (01/19/2020)

• Bugfix