JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div class="slider-wrap">
<button class="slider-btn slider--btn-prev">
  <span class="sr-only">Previous</span>
</button>
  <ul class="slider-list">
     <li class="slider-list__item">1</li>
     <li class="slider-list__item">2</li>
     <li class="slider-list__item">3</li>
     <li class="slider-list__item">4</li>
     <li class="slider-list__item">5</li>
  </ul>
  <button class="slider-btn slider--btn-next">
    <span class="sr-only">Next</span>
  </button>
  <div class="slider-dots__wrap"></div>
</div>


</body>
<script src="https://yastatic.net/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</html>

CSS

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

*,
::after,
::before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit
}

.sr-only {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px
}
.slider-wrap {
  position:relative;
  max-width:400px;
}

.slider-list__item {
  border:2px solid red;
  padding:20px;
  text-align:center;
  max-width:150px;
  
}
.slider-list__item:not(:last-child) {
  margin-right:15px;
}  
.slider-btn {
  background-color:unset;
  border:none;
  position:absolute;
  z-index:1;
}
.slider--btn-prev {
  left:0;
  top:50%;
  transform: translate(0, -50%);
}
.slider--btn-next {
  right:-25px;
  top:50%;
  transform: translate(0, -50%);
}
.slider-btn::after {
  content:'';
  display:block;
  width:26px;
  height:26px;
}

.slider--btn-prev::after {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 477.175 477.175' style='enable-background:new 0 0 477.175 477.175;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
}
.slider--btn-next::after {
  background-image:...

JavaScript

$('.slider-list').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  arrows:true,
  autoplaySpeed: 2000,
  dots:true,
  dotsClass:'slider__dots',
  appendDots:$('.slider-dots__wrap'),
	prevArrow: $('.slider--btn-prev'),
  nextArrow: $('.slider--btn-next')
});