JSFiddle - React, Tailwind, and code Playground

by webdevkumar

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class='slick-main text-center'>
   <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>29 JAN 18</small>
      <h6>1</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>02 FEB 18</small>
      <h6>2</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>10 FEB 18</small>
      <h6>3</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>29 JAN 18</small>
      <h6>4</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>02 FEB 18</small>
      <h6>5</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>10 FEB 18</small>
      <h6>6</h6>
      <a href="#">know more</a>
    </div>
  </div>
</div>

CSS

.inner-item{
  background: orange;
}
.item {
  padding: 0 5px;
}

JavaScript

$('.slick-main').slick({
  arrows: true,
    slidesToShow: 3,
  	slidesToScroll: 3,
    autoplay: true,
    dots: true,
    autoplaySpeed:2500,
    speed: 500,
});