No RTL support

[dquak]

Describe the bug There is no option to set the swipe to be from right to left (RTL) To Reproduce

Expected behavior Adding prop for a RTL support (isRTL={true})

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[YIZHUANG]

Hi,

Do you mean swipe right moves the Carousel to the right? What's the use case for this?

[dquak]

https://spotifylabscom.files.wordpress.com/2019/04/image7.gif Hi, This is an example of the direction. You understood it correctly, but to elaborate more- when you begin swiping, right arrow becomes the previous item indicator and is disabled, and left arrow means next item when sliding. When reaching the last item, left is disabled. To ease it, please think of the behavior expected by rtl language users (Hebrew, Arabic).

[dquak]

Hi, @YIZHUANG any updates about this feature request?

[YIZHUANG]

Hi, i am a bit busy lately, i will need some time, but meanwhile any PRs would be appreciated

[Dastnbek]

I need this feature too

[Dastnbek]

@dquak is there any alternatives ?

[saharalon]

@YIZHUANG i made a quick fix locally, adding a isRTL prop which then on previous() and next() functions, changed this: setState({transform: this.props.isRTL ? -nextPosition : nextPosition}) -> it fixes RTL when using customButtonGroup only. Is there any chance this RTL feature would get priority ?

Thanks!

[YIZHUANG]

I see working on this feature requires some efforts, as the behaviour for keep tracking of the current slide needs to be changed as well and of course the infinite mode included. I just don't have that time for such a big task for now, if anyone's up for it, feel free to work on it.

[iqasim-com]

Any update on this feature? or suggestions

[mctrafik]

I'm new to GitHub. I have made a change for RTL language support on my local clone. But I'm not sure how to open a PR. Contributing docs aren't helpful and I seem to not have access (can't push a branch). @YIZHUANG how do I open a PR?

[MAfzalKhan1997]

really need direction support any updates on this @YIZHUANG ?

[yaya1426]

Hi, I seem to found a workaround for the RTL issue. I applied this in an Arabic E-Commerce React app.

Here is what I did.

I added a containerClass prop for the <Carousel>

` <Carousel containerClass="carousel-with-custom-dots" {...rest}

{children} `

Then I set the direction of .carousel-with-custom-dots to be ltr .carousel-with-custom-dots { direction: ltr; } ;

and it worked like a charm !

[mctrafik]

That makes it work in left to right direction. It moves the wrong way in RTL languages. It should start at the right, and move towards left for true RTL support. You stopped it from getting completely broken, but that's not the same as RTL support.

I ended up forking this repo and adding RTL support in a private repo. :(

On Mon, Nov 8, 2021 at 5:08 AM Yahya Elaraby @.***> wrote:

Hi, I seem to found a workaround for the RTL issue. I applied this in an Arabic E-Commerce React app.

Here is what I did.

I added a containerClass prop for the .

<Carousel containerClass="carousel-with-custom-dots" {...rest} > {children}

Then I set the direction of .carousel-with-custom-dots to be ltr .carousel-with-custom-dots { direction: ltr; };

and it worked like a charm !

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/YIZHUANG/react-multi-carousel/issues/56#issuecomment-963132785, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAM5VCYENCSAYXP3XU5JRHLUK7DTHANCNFSM4IOLM63A . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[amir-ben-shimol]

The <Carousel /> component now accepts an rtl prop.