JSFiddle - React, Tailwind, and code Playground

by krays

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;
}
.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,
   
});