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>

<div class='next-button-slick'>
    next please
</div>
<div class='prev-button-slick'>
    prev please
</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*/
    }

JavaScript

$('.carsoule').slick({
	  dots: false,
      arrows: true,
      infinite: true,
      speed: 300,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 3000
	});
    $('.next-button-slick').click(function(){
        $('.carsoule').slickNext();
    });
    $('.prev-button-slick').click(function(){
        $('.carsoule').slickPrev();
    });