1

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

muhaymin khan
  • 93
  • 8

1 Answers1

4

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}
>
iamhuynq
  • 5,357
  • 1
  • 13
  • 36
  • 1
    Wow that worked Thanks a lot will you please explain what this key prop did here ? – muhaymin khan Jun 22 '22 at 13:59
  • But i got another issue. I did the same with the thumb slider and it gives an error when switching **Cannot convert undefined or null to object at Function.assign ()** – muhaymin khan Jun 22 '22 at 14:02
  • @muhayminkhan when you dynamic change dir of swiper, you need to destroy and re-initialize swiper. I'm not sure how to do that with swiper methods in reactjs. The key prop did here is force remounting component so swiper will be reinitialized, you can check [here](https://stackoverflow.com/questions/35792275/how-to-force-remounting-on-react-components). And the thumb problems, i found a issue on [github](https://github.com/nolimits4web/swiper/issues/5630) which can help you – iamhuynq Jun 23 '22 at 01:07