Swipeable Image Gallery

Build a touch-enabled image gallery component that responds to swipe gestures for navigation while preventing default browser scrolling during swipes.

Requirements

Create a React component that displays an image gallery with the following behavior:

Gallery Navigation

The gallery should:

• Display one image at a time from a provided array of image URLs
• Navigate to the next image when the user swipes left
• Navigate to the previous image when the user swipes right
• Not navigate beyond the first or last image (no wrapping)
• Display the current position (e.g., "3 / 5") below the image

Scroll Prevention

The component must:

• Prevent the browser's default scroll behavior during swipe gestures
• Only prevent scrolling when a swipe gesture is actively being tracked
• Allow normal scrolling when the user is not swiping on the gallery element

User Interaction

• The gallery should respond to both touch events (on mobile) and mouse drag events (on desktop)
• Visual feedback should indicate the current position in the gallery

Test Cases

• When swiping left on the first image, the gallery displays the second image @test
• When swiping right on the second image, the gallery returns to the first image @test
• When at the last image and swiping left, the gallery remains on the last image @test
• When the user is swiping on the gallery, the browser's default scroll is prevented @test

Implementation

@generates

API

interface ImageGalleryProps {
  images: string[];
}

export function ImageGallery(props: ImageGalleryProps): JSX.Element;

Dependencies { .dependencies }

react-swipeable { .dependency }

Provides swipe gesture detection with scroll prevention capabilities.

@satisfied-by