Slick Carousel RTL Support

Sometime slick carousel after having value of “true” in the JavaScript.

$('.your-class').slick({
  rtl: true
});

it is not work properly both in RTL and LTR . either it works in RTL mode but LTR are missing .

i’ll describe here. how it can be workable for both of RTL and LTR.

make a conditional function

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

instead of “true” set “rtl_slick()” to the value

$('.your-class').slick({
  rtl: rtl_slick(),
});

the HTML tag or the parent of the slider must have the attribute “dir” set to “rtl”.

<div dir="rtl">
<div class="your-class">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</div>
</div>

if you are using it on WPBackery Shortcode or any WordPress , PHP project. then make a condition .

<div <?php if( is_rtl() ){ echo'dir="rtl"'; }?>></div>

so attribute will be no longer available when it is LTR mode.