Detail pages with image galleries now have multiple ways to navigate between images, making it easier to explore different views of an item.

What's New

Touch Swipe Gestures
On mobile and touchscreen devices, swipe left or right on the image to navigate through the gallery. A 50-pixel threshold prevents accidental swipes while scrolling.

Arrow Buttons
Circular arrow buttons appear on the left and right sides of images when a gallery is present. They automatically disable at gallery boundaries (you can't go left from the first image or right from the last).

Image Counter
A small badge in the bottom-right corner shows your current position in the gallery (e.g., "2/4"). This helps you know how many images are available without scrolling through thumbnails.

Keyboard Navigation
Use the ← and → arrow keys to navigate the gallery when viewing a detail page. This works alongside the existing thumbnail click navigation.

Design Details

Navigation controls are sized at 24px to match the scale of favorite/compare buttons and maintain visual consistency. On icon-style images (which are smaller), the navigation controls hide automatically since the image area is too small.

Gallery images preload when you open a detail page, so clicking next/prev shows the new image instantly without loading delays.


Technical note: Preloading downloads all gallery images (typically 3-4) on page load. This adds minimal bandwidth cost for optimized webp files but significantly improves navigation responsiveness.