Run Custom Functions When Swiping – Fingerswipe

Category: Javascript | March 28, 2020
Views Total:265 views
Official Page:Go to website
Last Update:March 28, 2020


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

You Might Be Interested In:

Leave a Reply