🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Swipe Content

A Vanilla JavaScript plugin to detect touch interactions.

View Demo


All components are based on CodyFrame.

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.


✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us