Skip to content

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.

        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:



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///
  1. add the option {rtl:true} to the options

9 People found this is helpful