RTL fade issue

[rachelies]

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

4.1.4

Description

When setting direction to rtl and using type fade the slider does not work properly, to correct this issue I think this need to be changed

src/js/transitions/Fade/Fade.ts:36
from current
Slide.style( 'transform',translateX(-${ 100 Slide.index }%));
to
Slide.style( 'transform',translateX(${ options.direction === 'rtl' ? '' : '-' }${ 100 Slide.index }%));

I could not compile the source so I did not create A PR, can someone implement this? Thank you.

Reproduction Link

No response

Steps to Reproduce

.

Expected Behaviour

.

[code-r-man]

@rachelies I could not implement it in the source code (couldn't get the rtl value from the options), but I used JS to "patch" it like so:

    const splide = new Splide( '.splide', {
      type:'fade',
      perPage: 1,
    });

    const isRtl = function () {
      const html = document.querySelector('html');
      const dir = html.attributes.getNamedItem('dir');

      if (dir) {
        if (dir.value === 'rtl') return true;
      }

      return false;
    };

    if (isRtl()) {
      splide.on('ready', function (e) {
        const slides = splide.root.querySelectorAll('.splide__slide');

        slides.forEach(function (slide) {
          const transform = slide.style.transform;

          slide.style.transform = transform.replace('-', '');
        });
      });
    }

    splide.mount();