Активный слайд на slick js

$('.slider-win').slick({
    accessibility:true,
    slidesToShow: 1,
    slidesToScroll: 1,
    horizontalSwiping:true,
    swipe:true,
    autoplay: false,
    prevArrow: '<img src="https://img1.pngindir.com/20190707/yoe/kisspng-computer-icons-arrow-portable-network-graphics-sca-filesimpleicons-interface-arrow-pointing-left-in-5d224b7090e118.2838221815625286245934.jpg" class="slick-prev">',
    nextArrow: '<img src="https://static.tildacdn.com/tild3765-3363-4063-a137-396533353130/pngwingcom_1.png" class="slick-next">',
    dots: false,
    infinite: true,
    focusOnSelect: true,
    fade: true,
    cssEase: 'linear',
    asNavFor: '.slider-controll'
});

$('.slider-controll').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: false,
  vertical: false,
  dots: false,
  infinite: true,
  asNavFor: '.slider-win',
  focusOnSelect: true,
  centerMode: false,
  variableWidth: true
});

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

img {
  max-width: 500px;
}
.slider-win{
  margin:0 auto;  
  text-align:center;
}

.slider-controll .slick-slide {
  width: 150px;
  height: 150xp;
  cursor:pointer;
  border:2px solid transparent;
}

.slider-controll .slick-slide img {
  width: 100%;
  height: 100%;
  object-fit:cover;
  display: block;
}

.slider-controll .slick-slide.slick-current {
  border-color: skyblue;
}


.slick-prev{
    position: absolute;
    top: 50%;
    left: 5%;
    z-index: 100;
    width: 20px;
}
.slick-prev:hover{
    cursor: pointer;
}
.slick-next{
    width: 20px;
    position: absolute;
    top: 50%;
    right: 5%;
    z-index: 100;
}
.slick-next:hover{
    cursor: pointer;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="slider-win">
  <img src="https://images.unsplash.com/photo-1544801568-5ec5a66bf3fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" alt="">
  <img src="https://images.unsplash.com/photo-1517327258734-375b7a2aa8d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI0MX0&auto=format&fit=crop&w=1051&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1523053511548-d31e5927fb25?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1524701370974-bf337323869d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" alt="">
</div>
  
<div class="slider-controll">
  <div class="slider-item" data-item="1"><img src="https://images.unsplash.com/photo-1544801568-5ec5a66bf3fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" alt=""></div>
  <div class="slider-item" data-item="2"><img src="https://images.unsplash.com/photo-1517327258734-375b7a2aa8d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI0MX0&auto=format&fit=crop&w=1051&q=80" alt=""></div>
  <div class="slider-item" data-item="3"><img src="https://images.unsplash.com/photo-1523053511548-d31e5927fb25?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt=""></div>
  <div class="slider-item" data-item="4"><img src="https://images.unsplash.com/photo-1524701370974-bf337323869d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" alt=""></div>
</div>