JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div>
  <div class="leftarrow item">
    <i class="fa fa-arrow-left" aria-hidden="true"></i>
  </div>
  <div class="multiple-items item">
    <div>your content1</div>
    <div>your content2</div>
    <div>your content3</div>
    <div>your content4</div>
    <div>your content5</div>
    <div>your content6</div>
    <div>your content7</div>
    <div>your content8</div>
  </div>
  <div class="rightarrow item">
    <i class="fa fa-arrow-right" aria-hidden="true"></i>
  </div>
</div>

CSS

.multiple-items {
  width: 50%;
}

.item {
  display: inline-block;
}

JavaScript

var slick_instance = $('.multiple-items').slick({
  arrows: false
});

$('.leftarrow').click(function() {
  slick_instance.slick('slickPrev');
});

$('.rightarrow').click(function() {
  slick_instance.slick('slickNext');
});

$('.multiple-items').on('beforeChange', function(event, slick, currentSlide){
	var slickItem = $('.multiple-items .slick-slide:not(".slick-cloned")').length;
  
  if (currentSlide == 0) {
  	//do stuff
   // alert('first');
   slick_instance.slick('autoplaySpeed','1000');
  }
  //else if (currentSlide == (slickItem - 1)) {
  	//do stuff
  //  alert('last');
 // }
});