FormidableLabs / nuka-carousel

Small, fast, and accessibility-first React carousel library with an easily customizable UI and behavior to fit your brand and site.

https://commerce.nearform.com/open-source/nuka-carousel

Other

3k stars 596 forks source link

RTL Support #1008

Open TheGooner93 opened 1 year ago

TheGooner93 commented 1 year ago

Bugs and Questions

Prerequisites

[x] I've searched open issues to make sure I'm not opening a duplicate issue
[x] I have read through the docs before asking a question
[x] I am using the latest version of nuka-carousel

Describe Your Environment

What version of nuka-carousel are you using? 5.5.1
What version of React are you using? 18.2.0
What browser are you using? Chrome

Describe the Problem

Setting direction:rtl on document.body seems to break slide navigation. Reproducible on https://nuka-carousel-jz0747srr-nuka-carousel.vercel.app/

Expected behavior:

Being able to navigate from right to left when direction:rtl is set on

Actual behavior

Only the first slide is visible, on clicking on the "next slide" button, a blank slide is displayed

Additional Information

Demo:

https://user-images.githubusercontent.com/8807030/230324410-b7a0b9c2-279c-4b9a-a149-e2890364216a.mov

esla-ahme commented 6 months ago

I had the same problem Work around: wrap it in div and set dir to ltr

Id the item inside needs to be rtl wrap it also in a div thar inherits body dir