JSFiddle - React, Tailwind, and code Playground

by Stepan Kasyanenko

HTML

<script src="slick.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">
<div class="wrapper">
  <div class="wrap">
    <div class="slider">
      <div class="list"></div>
      <!-- /.slider-item -->
      <div class="list sec"></div>
      <!-- /.slider-item -->
      <div class="list"></div>
      <!-- /.slider-item -->
      <div class="list sec"></div>
      <!-- /.slider-item -->
      <div class="list"></div>
      <!-- /.slider-item -->
    </div>
  </div>
  <!-- /.wrap -->
</div>
<!-- /.wrapper -->

CSS

.wrapper {
  position: absolute;
  width: calc(100vw - 16px);
}

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

.list {
  padding-left: 10px;
  padding-right: 10px;
  width: 50px;
  height: 50px;
  background-color: #aeaeae;
}

.sec {
  background-color: red;
}

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

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

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({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  dots: true,

});