JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

 <ul class="module-brand-other-brands">          
          <li>osman</li>          
   <li>osman</li>          
   <li>osman</li>          
   <li>osman</li>          <li>osman</li>          
   <li>osman</li>          
   <li>osman</li>          
   <li>osman</li>          
  </ul>

JavaScript

$('.module-brand-other-brands').slick({
  infinite: true,
  slidesToShow: 5,
  slidesToScroll: 1,
  dots: false,
  autoplay: true,
  autoplaySpeed: 2000,
  arrows: false,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        arrows: false,
        centerMode: false,
        centerPadding: '40px',
        slidesToShow: 4,
      }
    },
    {
      breakpoint: 767,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 2
      }
    }
  ]
});