Table of Contents

• Features
• Demo
• Usage
  • Browser
  • Module
• Events
• Event Data
• Options
• Configure
• API
• License

Features

• Track swipes on any element
• Support for both touch and mouse input
• Configurable options
• Lock swipes to a specific axis (x, y, or both)
• High-performance with requestAnimationFrame
• Easy initialization and destruction of instances

Demo

See a demo here.

Usage

Browser

<div class="swipe" data-swipe></div>

<!-- CDN -->
<script src="https://unpkg.com/swipe-tracker/dist/swipe-tracker.umd.min.js"></script>
<!-- OR -->
<script src="https://cdn.jsdelivr.net/npm/swipe-tracker/dist/swipe-tracker.umd.min.js"></script>

<script>
  const el = document.querySelector('.swipe');

  el.addEventListener('swipeleft', (e) => {
    console.log('Swiped left!', e.detail);
  });
</script>

Module

npm i swipe-tracker

import SwipeTracker from 'swipe-tracker';

const el = document.querySelector('.swipe')!;
new SwipeTracker({ container: el }).init();

el.addEventListener('swipeleft', (e) => {
  console.log('Swiped left!', e.detail);
});

Events

| Event | Description | | ------------ | ------------------------------------------- | | swipe | Swipe is detected (any direction). | | swipemove | Pointer is moving (after exceeding buffer). | | swipeleft | Left swipe. | | swiperight | Right swipe. | | swipeup | Upward swipe. | | swipedown | Downward swipe. |

Event Data

All swipe events return a detail object:

{
  target: HTMLElement;
  type: 'mouse' | 'touch' | 'pen';
  startX: number;
  startY: number;
  currentX: number;
  currentY: number;
  distX: number;
  distY: number;
  direction: 'left' | 'right' | 'up' | 'down';
}

Options

| Option | Type | Default | Description | | --------- | ---------------------- | ------------ | ------------------------------------------------------------------------------------- | | container | HTMLElement / string | required | Element or selector where swipe tracking should be attached. | | threshold | number | 50 | Minimum distance (px) in the swipe direction required to trigger a swipe event. | | restraint | number | 100 | Maximum distance (px) allowed in the perpendicular direction for a swipe to be valid. | | buffer | number | 5 | Minimum movement (px) before swipemove events are fired (to prevent noise). | | mouse | boolean | false | Allow swipe detection with mouse input. | | lock | 'x' / 'y' / 'both' | 'both' | Restrict swipe detection to a specific axis. |

Configure

Via options in JavaScript:

new SwipeTracker({
  container: '.swipe',
  mouse: true,
});

Via HTML attributes:

<div
  class="swipe"
  data-swipe
  data-swipe-mouse="true">
</div>

API

• new SwipeTracker(options) — creates a new tracker instance
• instance.init() — initializes the tracker for the current element
• instance.destroy() — removes event listeners and cleans up state
• SwipeTracker.getInstance(element) — returns the tracker instance associated with a specific element
• SwipeTracker.initAll(selector?: string) — initializes all elements with data-swipe
  • If no selector is provided, data-swipe will be used
  • If a selector is provided, only elements matching it will be initialized
• SwipeTracker.destroyAll() — destroys all active instances

License

SwipeTracker is released under the MIT License. See the bundled LICENSE.md for details.