<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="slider">
  <img src="http://placehold.it/300x200/cfc" alt="">
  <img src="http://placehold.it/300x200/ccf" alt="">
  <img src="http://placehold.it/300x200/fcc" alt="">
</div>

<div class="slider">
  <img src="http://placehold.it/300x200/ccf" alt="">
  <img src="http://placehold.it/300x200/0cf" alt="">
  <img src="http://placehold.it/300x200/ffc" alt="">
</div>

<div class="slider">
  <img src="http://placehold.it/300x200/c00" alt="">
  <img src="http://placehold.it/300x200/0c0" alt="">
  <img src="http://placehold.it/300x200/сfc" alt="">
</div>

<div class="slider">
  <img src="http://placehold.it/300x200/aaf" alt="">
  <img src="http://placehold.it/300x200/0af" alt="">
  <img src="http://placehold.it/300x200/aac" alt="">
</div>

.slider{
   width: 500px;
   margin: auto;
   position: relative;
}

.next,.prev{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 45px;
  text-align: center;
  z-index: 2000;
}

.next{
  left: -80px;
}

.prev{
  right: -80px;
}

i.fa{
  font-size: 50px;
  
}

$(".slider").slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  prevArrow: '<div class="prev"><i class="fa fa-chevron-right"></i></div>',
  nextArrow: '<div class="next"><i class="fa fa-chevron-left"></i></div>'
});