Product image carousel auto-advances during pinch-zoom
Description
On mobile devices, when users pinch-to-zoom on a product image, the touch events are interpreted as swipe gestures by the carousel library. This causes the carousel to advance to the next image mid-zoom, which is jarring and makes it impossible to inspect product details.
Reproduction Steps
- 1
Open product detail page on mobile device (or Chrome mobile emulation)
- 2
Navigate to a product with multiple images
- 3
Place two fingers on the product image
- 4
Pinch outward to zoom in
- 5
Observe: carousel advances to next slide during zoom gesture
- 6
Expected: zoom should work without slide change
Root Cause Hypothesis
The carousel library (Swiper.js) doesn't distinguish between single-finger swipe and multi-finger pinch gestures by default. The `touchStartPreventDefault` option was set to false, allowing all touch events to propagate to the carousel's swipe handler.
Resolution
Configured Swiper with `touchEventsTarget: 'wrapper'` and added a custom `onTouchStart` handler that detects multi-touch (event.touches.length > 1) and temporarily disables swipe via `swiper.allowTouchMove = false`. Re-enabled on `touchEnd`. Also bumped Swiper to v11 which has improved pinch-zoom detection.