Swipe Content

A Vanilla JavaScript plugin to detect touch interactions.

How to

The swipe-content component allows you to detect drag and swipe gestures.

To activate the touch gesture detection for a specific element, add the js-swipe-content class to that element. Alternatively, you can initialize your element in JavaScript using the SwipeContent object:

var element = document.getElementById('yourId');
new SwipeContent(element);

Here are the events that are emitted when a touch gesture is detected:

1. dragStart emitted when the drag starts. You can have access to the coordinates of the drag origin using the detail property of the emitted event:

   element.addEventListener('dragStart', function(event){
     console.log(event.detail.x, event.detail.y); // drag origin coordinates
   });​

2. dragEnd emitted when drag ends. You can access the coordinates of the drag end point using event.detail (same as dragStart);
3. dragging emitted while the element is being dragged. Drag coordinates can be accessed using event.detail (same as dragStart);
4. swipeLeft, swipeRight, swipeUp, swipeDown emitted when a swipe event is detected. As for the drag events, you can access the coordinates of the swipe end origin using the event.detail property.

Categories

• Plugins > Misc

Bug report & feedback

Component Github page ↗