title: swiper slider breaks on language change in react
body: <p>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 <a href="https://react.i18next.com/" rel="nofollow noreferrer">https://react.i18next.com/</a></p>
  <p>The problem is when I switch language Swiper slider breaks. Let me show you preview and code</p>
  <p>This is normal in English language
  <a href="https://i.stack.imgur.com/ztZ2X.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ztZ2X.jpg" alt="enter image description here" /></a></p>
  <p>and this is the issue when I switch to arabic
  <a href="https://i.stack.imgur.com/6oiPp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6oiPp.png" alt="enter image description here" /></a></p>
  <p><strong>code is here</strong></p>
  <pre><code>&lt;Swiper
          loop={true}
          parallax={true}
          navigation={{
              prevEl: prevRef.current!,
              nextEl: nextRef.current!,
          }}
          speed={400}
          grabCursor={true}
          effect={&quot;fade&quot;}
          mousewheel={true}
          fadeEffect={{ crossFade: true }}
          thumbs={{ swiper: thumbsSwiper }}
          modules={[EffectFade, FreeMode, Navigation, Thumbs]}
          className=&quot;car_swiper&quot;
          dir={!langDirection ? &quot;rtl&quot; : &quot;ltr&quot;} 
      &gt;
  </code></pre>
  <p><strong>langDirection</strong> is a state use to check the language switch when it's false it means arabic. When it's true it means English</p>