Capture Touch Swipe Events On Web App – Swipy

Category: Javascript | June 14, 2018
Author: whiteCube
Views Total: 132
Official Page: Go to website
Last Update: June 14, 2018
License: MIT

Preview:

Capture Touch Swipe Events On Web App – Swipy

Description:

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!');
});

Leave a Reply