JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<div class="carsoule" style="overflow:hidden; width: 300px;height: 200px;margin: 0 auto; background:red">
                <div>
                    <img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250"/>
          </div>
       <div>
                                       <img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250"/>
                </div>
</div>

CSS

/*overrides*/
.slick-prev, .slick-next {
      height: 55px;
      width: 55px;
    }
  .slick-prev{
      left: -80px;
    /*plan to add button image*/
    }
    .slick-next{
      right: -80px;
    /*plan to add button image*/
    }

/*extra stuff*/
.carsoule{
    overflow: visible !important;
}
.slick-prev, .slick-next {
    position: absolute;
    background: red;
}

JavaScript

$('.carsoule').slick({
	  dots: false,
      arrows: true,
      infinite: true,
      speed: 300,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 3000
	});