AlpineJS custom directive to detect swipe gestures on an element.
Include the following <script> tag in the <head> of your document:
<script src="https://unpkg.com/alpinejs-swipe"></script>Important: This must be added before loading Alpine.js when using CDN links.
You can also install using a package manager.
npm install alpinejs-swipe
yarn add alpinejs-swipe
And then register the plugin before Alpine.start():
import swipePlugin from "alpinejs-swipe";
Alpine.plugin(swipePlugin);
Alpine.start();Just use the "x-swipe" directive with an expression and you'll be called back when the user swipes in the direction you want.
<div x-swipe:down="console.log('SWIPED DOWN!')"></div>
<div x-swipe:right="console.log('SWIPED RIGHT!')"></div>You can also define a threshold with modifiers:
<div x-swipe:down.threshold.200px="console.log('SWIPED DOWN!')"></div>The default threshold is 50.
If you want, it's also possible to be called back when the user swipes to any side, just omit the direction:
<div x-swipe="console.log('SWIPED!')"></div>In this case the direction will be passed to the function in the expression through the first argument.
- Allow other gestures detection (like pan, doubletap and longpress) with https://github.com/sciactive/tinygesture.
Licensed under the MIT license, see LICENSE.md for details.