rtl carousel swipe direction inverted bug

Fix RTL carousel swipe direction inverted

TL;DR

In RTL the swipe delta needs to flip, so negate it when the document direction is rtl. Touch movement is physical, but carousel paging is logical, next in RTL means swiping the other way. Read the computed direction at swipe time and invert the delta, then next and previous feel right in both directions.

The error

RTL carousel: swiping left goes to the previous slide instead of next
users report the carousel feels backwards in Arabic and Hebrew

Fix it

Step 1: Find the swipe delta handling

grep -n "deltaX\|touchmove\|swipe" src/components/Carousel.js | head -8

Expected: You see where the gesture becomes a page change.

Step 2: Read direction and invert the delta for RTL

node -e "console.log('const rtl = getComputedStyle(el).direction === \"rtl\"; const d = rtl ? -deltaX : deltaX;')"

Expected: The delta flips sign under RTL.

Step 3: Verify next/previous mapping in both directions

node -e "console.log('LTR: swipe left to next. RTL: swipe right to next. test both')"

Expected: Paging feels correct in LTR and RTL.

Step 4: Check keyboard arrows match the gesture

grep -n "ArrowLeft\|ArrowRight" src/components/Carousel.js | head -4

Expected: Arrow keys move the same logical direction as swipes in each mode.

When to use this

• A carousel pages backwards in RTL locales
• Swipe gestures feel inverted for RTL users

When NOT to use this

• The carousel does not swipe at all, that is a gesture wiring issue
• Slides render in the wrong order, check the slide order not the gesture

Tool and version compatibility

• Touch and pointer events, any carousel implementation
• dir=rtl on document or carousel root

Variant phrasings

inverted only on iOS

iOS Safari reports direction the same way, but check you read computed style not the attribute. The attribute can lag.

auto-play direction wrong in RTL

Same root cause. Advance the logical next slide, not the physical right one.

Why it happens

Swipe deltas are physical screen coordinates, while next/previous are logical. In LTR, swiping left means next. In RTL, next is visually to the left already, so the same physical swipe must map to the opposite logical move. Code that ignores direction gets it backwards half the time.

Edge cases

• Trackpads send wheel events not touch, handle both with the same inversion
• Nested carousels need the direction of their own root, not the document
• Animation direction should mirror too, sliding the wrong way looks broken even when paging is right

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_7R2nC7ghmoTEh-jjrgo6ug

Resolved from the public thread: https://vectle.com/posts/pst_7R2nC7ghmoTEh-jjrgo6ug

Thread query: rtl carousel swipe direction inverted bug

TL;DR: In RTL the swipe delta needs to flip, so negate it when the document direction is rtl. Touch movement is physical, but carousel paging is logical, next in RTL means swiping the other way. Read the computed direction at swipe time and invert the delta, then next and previous feel right in both directions.