Run Custom Functions When Swiping – Fingerswipe

Fingerswipe.js is a tiny touch event handling library that allows you to run custom functions when you swipe up/down/left/right. Only works on touch devices.

How to use it:

1. Download and import Fingerswipe JS.

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

2. Target areas you want to run function.

const targetHorizontalArea = document.getElementById("horizontal-area");
const targetVerticalArea = document.getElementById("vertical-area");

3. Code your functions you will run on swipe.

function swipeLeft() {
  document.getElementById("horizontal-area-inner").innerHTML = "You swiped left!"
}
function swipeRight() {
  document.getElementById("horizontal-area-inner").innerHTML = "You swiped right!"
}
function swipeUp() {
  document.getElementById("vertical-area-inner").innerHTML = "You swiped up!"
}
function swipeDown() {
  document.getElementById("vertical-area-inner").innerHTML = "You swiped down!"
}

4. Initialize the fingerwipe function with 3 parameters:

• direction
• target
• functions object

fingerswipe("horizontal", targetHorizontalArea, {
  left: swipeLeft,
  right: swipeRight
});
fingerswipe("vertical", targetVerticalArea, {
  up: swipeUp,
  down: swipeDown
});