AlpineJS custom directive to detect swipe gestures on an element.
npm install alpinejs-swipeAlpineJS custom directive to detect swipe gestures on an element.
!npm bundle size
!Module system
Include the following
> 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():
`js`
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.
`html`
You can also define a threshold with modifiers:
`html`
> _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:
`html``
> _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.