Swipeable Mixin

About Swipeable Mixin

This mixin adds touch swipe gesture detection to any web component. It supports directional swipes (left, right, up, down) with customizable sensitivity and timing. Perfect for mobile-friendly interfaces and gesture-based interactions.

💡 Tip: On desktop, you can use mouse drag gestures instead of touch swipes! The settings are optimized for both mobile and desktop use.

🧪 Simple Test

Try swiping this red box first to test basic functionality (use touch on mobile or mouse drag on desktop):

Simple Test Element

Touch/swipe or mouse drag this red box to test basic functionality (min distance: 1px)

🎯 Interactive Swipe Demo

Try swiping in different directions on the container below:

👆

Swipe Me!

Use touch gestures to interact with this element

Distance: 0px

Time: 0ms

Direction: None

0 Left

0 Right

0 Up

0 Down

⚙️ Swipe Settings

Min Distance: px (minimum swipe distance)

Max Time: ms (maximum swipe duration)

📜 Swipe History

Swipe history will appear here...

🎨 Multiple Swipeable Elements

Card 1

🔄

Swipe to interact

Card 2

🎯

Different behavior

📖 Implementation Guide

How to Use the Swipeable Mixin:

1. Use the element: <swipeable-mixin>...content...</swipeable-mixin>

2. Set optional attributes: min-swipe-distance, max-swipe-time

3. Listen for the swipe event on the element to handle swipes in your code

          // Basic usage
          <swipeable-mixin min-swipe-distance="30" max-swipe-time="800">
            <div>Swipe me!</div>
          </swipeable-mixin>

          // JavaScript: listen for swipe events
          const swipeable = document.querySelector('swipeable-mixin');
          swipeable.addEventListener('swipe', (e) => {
            const direction = e.detail.direction;
            const distance = e.detail.distance;
            const time = e.detail.time;
            // Handle swipe!
            console.log('Swiped', direction, distance, time);
          });
        

✨ Features

What the Swipeable Mixin Provides:

Directional Detection: Detects left, right, up, and down swipes
Customizable Sensitivity: Adjustable minimum distance and maximum time
Touch Support: Works on mobile devices and touch-enabled screens
Event Dispatching: Automatically dispatches custom swipe events
Performance Optimized: Efficient touch event handling
Easy Integration: Simple mixin pattern for any component

📱 Swipeable Mixin