JSFiddle - React, Tailwind, and code Playground

by Fahd Murtaza

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css">
<section class='services'>
  <div class='slick'>
    <div class='red'></div>
    <div class='green'></div>
    <div class='blue'></div>
      <div class='red'></div>
    <div class='green'></div>
  </div>

</section>

CSS

section.services {
  @extend .padding0;
  @include bgcolor(#fff);
  .slick,
  .slick * {
    outline: none;
  }
}

.red {
  height: 100px;
  background: red;
}

.blue {
  height: 100px;
  background: blue;
}

.green {
  height: 100px;
  background: green;
}

JavaScript

$('.slick').slick({
        slidesToShow: 3,
        speed: 300,
        autoplay: false,
        dots: true
    });