Slick Carousel – RTL function

I am facing an issue in Slick Carousel to work in both LTR and RTL. It works by default in LTR, but when I change the page to RTL I get a blank container. There is an option “rtl: true” but that would make it always working in rtl.

I have tried to add a conditional function in JS file where it can work in both.

function rtl_slick(){
if ($('body').hasClass("rtl")) {
   return true;
} else {
   return false;
}}

This is the conditional function I used. But it did not work. I’m not sure what I did wrong.

$('.first-screen-slider').slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        dots: false,
        autoplay: true,
        autoplaySpeed: 2000
        rtl: rtl_slick(), // this is where the function should work
    });

This is the package website: https://kenwheeler.github.io/slick/

Answer

to get it to work you need 2 things:

1. add the attribute dir=”rtl” to the parent

<div id="slider" dir="rtl">
   ///your slides///
</div>

2. add the option {rtl:true} to the options

https://codepen.io/axelilali/pen/MWGMVzq