Capture Touch Swipe Events On Web App – Swipy

Swipy is a small JavaScript plugin for cross-platform web app that detects the touch swipe gesture events and fires events when an element is swiped on touch devices.

How to use it:

Install and import the Swipy module.

# Yarn
$ yarn add swipyjs
# NPM
$ npm install swipyjs --save

Or include the complied JavaScript file on the page.

<script src="dist/swipy.js"></script>

Capture the touch swipe events on a specific element.

let swipy = new Swipy(document.getElementById('demo'));

Triggers events on swipeLeft, swipeRight, swipeTop, and swipeBottom.

/* callback = 
  {
    down: {x: null, y: null},
    up: {x: null, y: null},
    diff: {x: null, y: null}
  }
*/
swipy.on('swipeleft', function(event, callback) {
  console.log('Swiped to the left!');
});
swipy.on('swipetop', function(event, callback) {
  console.log('Swiped to the top!');
});
swipy.on('swiperight', function(event, callback) {
  console.log('Swiped to the right!');
});
swipy.on('swipebottom', function(event, callback) {
  console.log('Swiped to the bottom!');
});

Changelog:

12/21/2018

• v0.0.5