Swipe Content

A Vanilla JavaScript plugin to detect touch interactions.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

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.

Bug Report & Feedback

Get in touch: suggest a component or report a bug.