Swipeable Image Gallery

Build a React component that allows users to navigate through images using swipe gestures on touch devices and mouse interactions on desktop browsers.

Requirements

Create an ImageGallery component that:

• Displays a single image at a time from an array of image URLs
• Supports swipe-left gesture to advance to the next image
• Supports swipe-right gesture to go back to the previous image
• Supports swipe-up gesture to mark the current image as a favorite
• Supports swipe-down gesture to remove the current image from favorites
• Displays a visual indicator showing the current image position and total count
• Shows a heart icon when an image is marked as favorite
• Maintains a list of favorited image indices
• Wraps around at the boundaries (after last image, goes to first; before first image, goes to last)

Component Interface

The component should accept the following props:

• images: An array of image URL strings
• initialIndex: The starting image index (default: 0)
• onFavoriteToggle: Optional callback function called with the image index when favorited/unfavorited

Test Cases

• Swiping left on the first image advances to the second image @test
• Swiping right on the second image returns to the first image @test
• Swiping up on an image marks it as favorite and displays a heart icon @test
• Swiping down on a favorited image removes it from favorites @test

Implementation

@generates

API

/**
 * A swipeable image gallery component
 */
export function ImageGallery({ images, initialIndex = 0, onFavoriteToggle }) {
  // IMPLEMENTATION HERE
}

Dependencies { .dependencies }

react-swipeable { .dependency }

Provides swipe gesture detection for React components.

react { .dependency }

React library for building user interfaces.