Run Custom Functions When Swiping – Fingerswipe

Category: Javascript | March 28, 2020
Author: inancakduvan
Views Total: 73 views
Official Page: Go to website
Last Update: March 28, 2020
License: MIT

Preview:

Run Custom Functions When Swiping – Fingerswipe

Description:

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

You Might Be Interested In:


Leave a Reply