Cross-Platform Content Slider Library – TouchSlider

Category: Javascript , Recommended , Slider | January 19, 2020
Author: qiqiboy
Views Total: 163 views
Official Page: Go to website
Last Update: January 19, 2020
License: MIT

Preview:

Cross-Platform Content Slider Library – TouchSlider

Description:

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

You Might Be Interested In:


Leave a Reply