RTL & LTR Issue

[mohux]

Am using nextjs but anyway am disabling SSR for this component

which means its on client slide

if I start as left to right direction it works fine

if I start as RTL it works fine

but if I switch from RTL to LTR

the swipe behavior is broken and i can see an overflow to the left

while if i go from LTR to RTL it works fine

even when I use dynamic key to recreate the component

[mohux]

its really killing me :/

if i play around and setTimeout to return the slider, it works

 <Swiper rtl={lang === 'en' ? undefined : 'rtl'} slidesPerView={4} spaceBetween={3}>
               {content}
            </Swiper>

tried rebuildOnUpdate as well, the same issue occured

when i open inspect I saw that container-rtl is still there even when its no more RTL

[lucasfrey]

I have the same issue, did you find another work around ?

[lucasfrey]

I just found a workaround. I just set the direction on element inside the SwiperSlider component by adding something like this

    const rtl = isRTL(locale);
    ....
  <SwiperSlide
      className="Swiper-slide"
      dir={rtl ? 'rtl' : 'ltr'}

Hope that can help

[asmaasafwat12]

mohux did you find a solution ??

[mohux]

Yes actually, @asmaasafwat12, I stopped using swiper-id, its based on swiperjs, so am using swiper/react from official swiperjs lib, adding key={${lang}-swiper}} in fixed it in swiper/react,

[mohux]

if it HAS to be swiper-id, i would modify "dir" using ref, because its hardcoded in swiper-id, so doing something like

useEffect(() => {
swiper.current.dir = myDir;
},[])

might work, didnt try it to be honest

[asmaasafwat12]

Yes actually, @asmaasafwat12, I stopped using swiper-id, its based on swiperjs, so am using swiper/react from official swiperjs lib, adding key={${lang}-swiper}} in fixed it in swiper/react,

i am also using swiper/react...but where can i add this key ?

[mohux]

in case you are using some kind of translation lib, you add i to

if you are only using one language, then. no need, just. pass the dir

[asmaasafwat12]

in case you are using some kind of translation lib, you add i to

if you are only using one language, then. no need, just. pass the dir

thank you , its working

[Shahab-Sidd]

const Slider = () => { const { language } = React.useContext(LanguageContext); return ( <> <Swiper autoplay={{ delay: 2500, disableOnInteraction: false, }} pagination={{ clickable: true, }} modules={[Pagination, Autoplay]} className="mySwiper" key={${language}`}

</> ); }; Add key={${language}`} and directions will work fine.

[nikhilgoswami]

in case you are using some kind of translation lib, you add i to

if you are only using one language, then. no need, just. pass the dir

I did not understand what should be language value? Will the key work on official Swiper/React? What is the fix for official Swiper/React?

[AlaBenAicha]

The issue you are facing could be related to the fact that CSS is cached by the browser, and reloading the page forces the browser to reload the CSS files. Since your slider component is dependent on the directionality of the text (LTR vs RTL), the cached CSS may not work correctly when the directionality changes dynamically.

To fix this issue, you can try adding a unique key to your slider component that changes whenever the language changes. This will force React to remount the component and fetch the new CSS.

[aslamve11adan]

if You're using swiper/react and i18n. use this

THIS THINGS NEED TO BE ADDED const rtlSwitch = i18n?.dir() key={${rtlSwitch}-swiper} dir={rtlSwitch}

return ( <> <Swiper spaceBetween={spaceBetween} autoplay={autoplay} dir={rtlSwitch} pagination={ pagination && { clickable: true, } } effect={fade} modules={[Autoplay, Pagination, Navigation, Grid, EffectFade]} className={className ?? "mySwiper"} slidesPerView={slidesPerView} navigation={{ prevEl: prevRef && prevRef.current, nextEl: nextRef && nextRef.current, }} /update state on swiper initialization/ onInit={() => setInit && setInit(true)} breakpoints={breakpoints} grid={grid} onEnded={() => alert("test")} onLas key={${rtlSwitch}-swiper}

{data}

[SeniorSam7]

Just key={locale} should solve the problem