RTL support

[ali-hellani]

will the plugin have RTL support in the future ?!

[ganlanyuan]

Yes.

[lbineau]

Any release planned?

[asennoussi]

Any news about this guys? If not, can you recommend a library that supports rtl?

[ganlanyuan]

Supper busy recently. Won't be able to add this feature in 1 month.

[santamaria7]

Any news about this feature?

[ganlanyuan]

Just finished center, will start work on this. But it will take some time due to the overall complexity.

[andrepereiradasilva]

+1 for rtl support

[QusaiNaim]

Any news about this feature?

[wouterkroes]

Any news about this feature, any idea when it will added?

[joeyrubio]

RTL support would be amazing. Any updates @ganlanyuan ? Thanks!!!

[piotrku]

It probably needs some more testing but looks like my quick fix added RTL support for horizontal carousel slider setup, just check: https://github.com/piotrku/tiny-slider/commit/a7b88d66e3513ebcd01df4bd062791271b1b3d24

[wouterkroes]

Any updates?

[therayess]

Hi, any updates on this please? RTL support would be perfect, thanks

[mrk9776]

Any updates?

[yelsayed]

Until a PR is approved or is developed. A quick fix is to make a wrapper to the dom object defined in your container, and make that wrapper have direction: ltr style. It doesn't look so bad on Arabic websites and it's a good solution if you want to continue using this lib.

[sneetsher]

@ganlanyuan Hi, I'm not so advanced dev. I would like to try adding RTL support, if you don't mind and if no one is already doing it?

I'm setting up its dev env as documented in Contribute file. Please, let me if there any other important point I should be aware of or any advice.

I'm going to use this convention: dir="rtl" in HTML as switch, same CSS files for both LTR/RTL.

As documented in Drupal docs - CSS formatting guidelines.

[ali-joghataei]

Any news about this ? @ganlanyuan

[alivazirinia]

@ganlanyuan Hi, any plan for adding RTL support?

[samikeijonen]

It probably needs some more testing but looks like my quick fix added RTL support for horizontal carousel slider setup, just check: piotrku@a7b88d6

@piotrku Thanks for this! In my test this worked like a charm.

Would be nice to be implemented in the original repo :)

[sa8ab]

using

.tns-carousel {
  display: flex;
  flex-direction: row-reverse;
}

reverses the items but still it starts from left

[mahdinai]

rtl repo: npm i tiny-slider-rtl --save

[danstramer]

is there an update? adding RTL support similar to owl slider: https://owlcarousel2.github.io/OwlCarousel2/demos/rtl.html

Thanks! Dan

[sneetsher]

@danstramer check PR from jmfarina https://github.com/ganlanyuan/tiny-slider/pull/658

[youth10313]

Until a PR is approved or is developed. A quick fix is to make a wrapper to the dom object defined in your container, and make that wrapper have direction: ltr style. It doesn't look so bad on Arabic websites and it's a good solution if you want to continue using this lib.

many thanks

[hamajamaldev]

from tiny-slider.js inside this if (hasAutoplay) {} change

var autoplayDirection = options.autoplayDirection === 'forward' ? 1 : -1,

to var autoplayDirection = options.autoplayDirection === 'backward' ? 1 : -1,

to change direction i used this and worked

[mostafa-norouzi]

.tns-carousel { display: flex; flex-direction: row-reverse; }

It also makes problem if Lazy load be on

[mostafa-norouzi]

As tiny-slider seems dead totally, I switched to the Splide. It supports RTL very well

[ivankomartin]

This is how I handled RTL; it works perfectly. I played with the direction: rtl/ltr, reversed the slider row, created a function that moves the slider to the end, and then displays the hidden slider. !! The code is not complete; I only extracted what I changed.

html:dir(rtl) {
  .tns-item {
    direction: rtl;
  }
  .slider-wrapper {
    direction: ltr;
  }
  .slider {
    flex-direction: row-reverse;
  }
  .hidden-carousel {
    visibility: hidden;
  }
}
<div class="hidden-carousel">
  {{#with shop.carousel}}
  <div>
    <div class="c-carousel">
      <div class="slider-wrapper">
        <div id="slider" class="slider">
          {{#each list }}
          <div class="h-pt-8">card-data</div>
          {{/each}}
        </div>
      </div>
    </div>
  </div>
  {{/with}}
</div>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    document
      .querySelectorAll("[data-carousel-id]")
      .forEach(function(carouselElement) {
        var isRTL = document.documentElement.getAttribute("dir") === "rtl";
        !isRTL && carouselElement.classList.remove("hidden-carousel");

        function goToLastSlide() {
          var interval = setInterval(function() {
            var info = slider.getInfo();
            if (info.index + info.items < info.slideCount) {
              nextArrow.click();
            } else {
              clearInterval(interval);
              setTimeout(function() {
                carouselElement.classList.remove("hidden-carousel");
              }, 200);
            }
          }, 0);
        }

        isRTL && goToLastSlide();
      });
  });
</script>