Carousel

Slide one starts at the right in Arabic and advancing moves leftward, which a scroll container, a flex track, and the dot row all do by themselves, because the inline axis follows direction. Do not flip it a second time: flex-direction: row-reverse under [dir="rtl"], or a reversed array in JavaScript, puts the visual order back the way English had it and leaves Tab order disagreeing with the eye. The exception is a track driven by transform: translateX(calc(-100% * var(--i))), since transforms know nothing about direction, so sign the offset with var(--dir) and set --dir: -1 inside [dir="rtl"].

The Previous button belongs at the logical start, which in Arabic is the right, so place the pair with inset-inline-start and inset-inline-end rather than left and right. The chevron drawing mirrors with them: put scaleX(-1) on a class you use for arrows alone, or swap the two icons. The job mirrors too, because Next now scrolls toward the left: write el.scrollBy({ left: step * dir }) with dir at -1 under RTL, and have the key handler read ArrowLeft as Next.

Current engines start at zero on the first slide and go negative as you advance, older WebKit started at the maximum positive value and counted down, and IE counted up from zero. Anything shaped like Math.round(scrollLeft / slideWidth) therefore returns a negative or wrong slide number in Arabic. Stay off the sign entirely: jump with slide.scrollIntoView({ inline: "start", block: "nearest" }), which is logical already, and derive the current slide by comparing each getBoundingClientRect against the logical edge of the viewport.

scroll-snap-align: start is flow relative, so it becomes the right edge in Arabic on its own, and scroll-snap-type: inline states the intent more precisely than x. scroll-padding-left, on the other hand, keeps the gutter on the left after the flip, so write scroll-padding-inline-start. The scrim over a hero image is worse, because neither gradients nor background-position accept flow-relative values at all: linear-gradient(to right, …) and background-position: left center both stay where they were, so they need an explicit override inside [dir="rtl"].

The photograph, a logo inside it, and the play and pause control of an autoplaying carousel keep their drawing in Arabic. The usual cause of a mirrored face or a backwards logo is a blanket rule like [dir="rtl"] svg, [dir="rtl"] img { transform: scaleX(-1) }, so reserve the flip for a class you put on the two arrows and nothing else. Playback controls point along the timeline rather than along the text, which is why the triangle faces the same way in both languages.