Svelte swipe gesture handler
npm install svelte-swipeableLightweight library to handle swipe gestures in Svelte
npm i svelte-swipeable
``javascript`
import { Animate } from 'svelte-swipeable';`html
stiffness=0.2
damping=0.2
willReturn=true
momentum=0.2
options={options}
swipeUp={hanldeSwipe}>
#### Events
| Event | Triggered |
| :--------- | :------------------------- |
| swipeUp | After swiping up |
| swipeDown | After swiping down |
| swipeRight | After swiping right |
| swipeLeft | After swiping left |
| swipeStart | After mousedown on element |
| swipeMove | After moving element |
| swipeEnd | After mouseup on element |
#### Event Data
| Data | Definition |
| :-------- | :-------------------------------------------- |
| x | Coordinate of new X |
| y | Coordinate of new Y |
| initial | Object containing initial x and y coordinates |
| direction | Object containing x direction and y direction |
`javascript
// Assuming a swipe up of 200pxfunction handleSwipe(event) {
console.log(event.detail.initial.y); //0
console.log(event.detail.y); //200
console.log(event.detail.direction.y); //up
}
`#### Options
These thresholds will take effect on all direction-specific events. Default is 0px.
`javascript
let options = {
threshX: 100, // threshold in x before event is triggered (px)
threshY: 200 // threshold in y before event is triggered (px)
};
`$3
`javascript
import swipe from 'svelte-swipeable';
``html
Content
``