Simple Touch Swipe With Vanilla JavaScript | swiped-events

Simple Touch Swipe – pure-swipe is a JavaScript-based swipe occasions detection library that provides lacking swiped-left, swiped-right, swiped-up, and swiped-down events to the addEventListener() API.

Based on this StackOverflow thread, detect your finger with JavaScript on iPhone and Android.

Must Read – Free Library Agnostic Touch Slider with Swipe | keen-slider

How to make use of it:

Download and import the JavaScript file pure-swipe.js into the doc.

<script src="src/pure-swipe.js"></script>

Specify the event varieties to hear for.

// swiped-left
document.addEventListener('swiped-left', function(e) {
  // ...
});

// swiped-right
document.addEventListener('swiped-right', function(e) {
  // ...
});

// swiped-up
document.addEventListener('swiped-up', function(e) {
  // ...
});

// swiped-down
document.addEventListener('swiped-down', function(e) {
  // ...
});

Customize the pure-swipe through HTML5 information attributes as follows:

  • data-swipe-threshold: set how far the consumer should swipe earlier than it’s thought about a swipe
  • swipe-timeout: timeout in milliseconds
  • ignore: disable the event detection on this component.
<div data-swipe-threshold="20" data-swipe-timeout="500" data-swipe-ignore="false">
     Swipe me
</div>

Must Read – A Fast, Lightweight & Mobile-friendly Number Picker Component | number-swiper

Configure

You can optionally configure how swiped-events works using the following HTML attributes:

AttributeDescriptionTypeDefault
data-swipe-thresholdNumber of pixels a user must move before swipe firesinteger20
data-swipe-timeoutNumber of milliseconds from touchstart to touchendinteger500
data-swipe-ignoreIf true, swipe events on this element are ignoredbooleanfalse

Read More – 

An Accessible Touch-enabled Slider Web Component | fg-carousel
Vue Component Bind Mouse And Touch Events Gestures | UseGesture


See Demo And Download

Official Website(john-doherty): Click Here

This superior jQuery/javascript plugin is developed by john-doherty. For extra Advanced Usage, please go to the official website.

Share