JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/popper.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/ajax-loader.gif"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="container-fluid banner">
	<div class="row">
		<div class="col-12">
		 <div class="slider">
		 
<div class="slider-nav">
      <div class="slider-nav-img-1"></div>
      <div class="slider-nav-img-2"></div>
      <div class="slider-nav-img-3"></div>
  </div> 

  <div class="slider-for">

 	    <div><a href="#"><img alt="" src="https://store.storeimages.cdn-apple.com/4981/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone7/select/iphone7-select-2016?wid=222&hei=305&fmt=png-alpha&.v=1471892660314" width="52" height="57">
      </a>
      </div>  
		
		<div><a href="#"><img alt="" src="https://my.citrus.ua/imgcache/size_1000/uploads/shop/c/1/c183cc27337c89e740556580a249fbd4.jpg" width="52" height="57">
    </a>  
		</div>
		
		<div><a href="#"><img alt="" src="https://images.сота.укр/cache/data/Apple/iphone8-red-03-300x300.jpg" width="52" height="57">
    </a>  
		</div>
		
</div>

</div>
</div>
</div>
</div>

CSS

.banner{
  background: #10cbb4;
  	width: 100%;
}
.slider{
	margin: 0;
   background: #10cbb4;
	padding-left: 7%;
	width: 100%; 
	height: auto;
	position: relative;
  
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;     
    margin: 0;
    padding: 1px;
}
 
.slick-initialized .slick-slide{
    display: block;
}

.slick-slide{
    display: none;
    float: left;
  	height: 100%;
    min-height: 1px;
    padding: 1px;
} 
.slick-slide img{
    display: block;
	
}

.slider-for{
	position: relative;
	width: 100%;	 
	padding: 3.6rem 0 2rem 4rem;
	z-index: 0;	
}
 
.slider-nav{
	position: absolute; 
  right: 0;     
  width: 20rem;
  z-index: 100;	
} 
 
.slider-nav-img-1, .slider-nav-img-2, .slider-nav-img-3{	 
    padding: 2rem 1.5rem 1rem;
    position: relative;
}
.slider-nav-img-1{
    background-color: rgba(189,220,222,0.28);
}
.slider-nav-img-2{
    background-color: rgba(82,163,167,0.68);
}
.slider-nav-img-3{
    background-color: rgba(31,136,142,0.88);
}
 
.slider-nav .slick-current::before{
	position: absolute;
	content: "";
	bottom: -1rem; left: 2.8rem;
  width: 0;
  height: 0;
  border-top: 17px solid black;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
} 

.slider-nav .slick-track{
	 overflow: hidden;
 }
 .slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

JavaScript

$(function() {
	  
  $('.slider-for').slick({
  autoplay: false,
  autoplaySpeed: 4000,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  speed: 500,
  draggable: false,
  asNavFor: '.slider-nav'
  });

  $('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
 
  focusOnSelect: true 
  });
  
 });