Dynamic RTL change

[codesignist]

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 5.0.4

• Platform/Target and Browser Versions: Windows - Chrome 77.0.3865.120

• Codepen: https://codepen.io/codesignist/pen/VwwaqNj

What you did

I've changed html direction to "rtl" by JS.

document.documentElement.dir = "rtl";

Expected Behavior

RTL change should affect Swiper and should work from right to left as expected.

Actual Behavior

RTL change doesn't make any effect on Swiper.

[nolimits4web]

It is by design, it can be initialized when it is rtl or not, and it’s behavior can’t be changed after init. If you really need such behavior you can destroy and reinit Swiper in this case

[EliezerB123]

@nolimits4web Why?

It seems that it is already working just fine as is. Why not include it in the official documention?

window.on('myLanguageEvent',function(event){
        swiper.rtl =  (event.direction === 'rtl');
        swiper.rtlTranslate = (event.direction === 'rtl');
});

seems to correctly causes the slider to switch directions properly.

[farhadf246]

is it possible add direction changes in to the observe parameter? or when call update method update slider direction too?

[Mostafatalaat770]

@nolimits4web Why?

It seems that it is already working just fine as is. Why not include it in the official documention?

window.on('myLanguageEvent',function(event){
        swiper.rtl =  (event.direction === 'rtl');
        swiper.rtlTranslate = (event.direction === 'rtl');
});

seems to correctly causes the slider to switch directions properly.

This is working great without the rtl property. ReactJs example:

import  React, { useEffect, useState } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Swiper as SwiperInstance } from 'swiper'
import i18n from 'i18next'

const Slider = () => {

  const [swiper, setSwiper] = useState<SwiperInstance | null>(null)
  useEffect(() => {
    if (swiper) {
      swiper.rtlTranslate = i18n?.dir() === 'rtl'
    }
  }, [swiper, i18n?.dir()])

  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSwiper={(swiper : SwiperInstance) => setSwiper(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  )
}

[kirillsakun]

Seems like it doesn't reset margins that were added by spaceBetween option and breaks if slidesPerView option is set to 'auto'