reactjsswiper.js

swiper slider breaks on language change in react

I am using Swiper slider in React to slide cars and it is working fine. But I have a language switcher in my App from English to Arabic and for language switch I am using i18n https://react.i18next.com/

The problem is when I switch language Swiper slider breaks. Let me show you preview and code

This is normal in English language enter image description here

and this is the issue when I switch to arabic enter image description here

code is here

<Swiper
        loop={true}
        parallax={true}
        navigation={{
            prevEl: prevRef.current!,
            nextEl: nextRef.current!,
        }}
        speed={400}
        grabCursor={true}
        effect={"fade"}
        mousewheel={true}
        fadeEffect={{ crossFade: true }}
        thumbs={{ swiper: thumbsSwiper }}
        modules={[EffectFade, FreeMode, Navigation, Thumbs]}
        className="car_swiper"
        dir={!langDirection ? "rtl" : "ltr"} 
    >

langDirection is a state use to check the language switch when it's false it means arabic. When it's true it means English

Solution

  • Can you try to pass key props to your swiper or swiper parent

    <Swiper
    loop={true}
    parallax={true}
    navigation={{
        prevEl: prevRef.current!,
        nextEl: nextRef.current!,
    }}
    speed={400}
    grabCursor={true}
    effect={"fade"}
    mousewheel={true}
    fadeEffect={{ crossFade: true }}
    thumbs={{ swiper: thumbsSwiper }}
    modules={[EffectFade, FreeMode, Navigation, Thumbs]}
    className="car_swiper"
    dir={!langDirection ? "rtl" : "ltr"}
    key={langDirection}
>