JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<!--              ^
    Use the FORK, Luke.
    create your own new fiddle test case.
-->
<div dir="rtl">
  <div class="slider">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
  </div>
</div>

SCSS

$c1: #3a8999;
$c2: #e84a69;

.slider {
    width: auto;
    margin: 30px 50px 50px;
}

.slick-slide {
    background: $c1;
    color: white;
    padding: 40px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
}

.slick-slide:nth-child(odd) {
     background: $c2;
}

JavaScript

/**

    This fiddle is using the latest version 
    of Slick (from master) and jQuery.

    If your issue occurs in older version or a 
    specific tag; please use the "External Resources" 
    section in the sidebar to correct it.

**/


$(".slider").slick({
  autoplay: true,
  dots: true,
  responsive: [{
    breakpoint: 500,
    settings: {
      dots: false,
      arrows: false,
      infinite: false,
      rtl: true,
      slidesToShow: 2,
      slidesToScroll: 2
    }
  }]
});

$(window).on('resize', function() {
  if ($(this).width() > 500) {
    $('.slider').parent().attr('dir', '');
  } else {
    $('.slider').parent().attr('dir', 'rtl');
  }
});
$(window).trigger('resize');