Images do not display on sliders (swiper) when switch direction based on react-intl

Question

I am using react-intl to change the local language and as one of the languages needs to be 'rtl', I used a solution mentioned in a question.

dir={intl.locale === 'en-US' ? 'ltr' : 'rtl'}

However, when the direction is switched to 'rtl', images do not display on swiper sliders. is there a way to fix it?

Thanks

Please provide enough code so others can better understand or reproduce the problem. — Community, Oct 13 '21 at 01:36

ImDevFps · Answer 1 · 2023-05-23T10:28:21.677

3

just add key prop to your swiper component

<Swiper key={intl.locale}></Swiper>

edited May 23 '23 at 10:28

answered May 23 '23 at 07:53

ImDevFps

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 23 '23 at 08:41

score 2 · Answer 2 · answered Oct 27 '21 at 11:52

2

I found the answer. If you ever faced such a problem, the only thing to do is to give your swiper style={{ direction: "ltr" }}

answered Oct 27 '21 at 11:52

Amirhosseinkcle

2

didn't work for me. I have a nextjs project. I face this problem when switching locale – Reza Mirzapour Jul 13 '22 at 08:42

2 Answers2