Карусель со скроллбаром

$('.js-slider-for').slick({ 
            slidesToShow: 1, 
            slidesToScroll: 1, 
            arrows: false, 
            fade: true, 
            asNavFor: '.js-slider-nav' 
        }); 
        $('.js-slider-nav').slick({ 
            slidesToShow: 3, 
            slidesToScroll: 1, 
            asNavFor: '.js-slider-for', 
            dots: false, 
            vertical: true, 
            verticalSwiping: true, 
            focusOnSelect: true 
            // prevArrow: $('.prev_thumb-img'), 
            // nextArrow: $('.next_thumb-img') 
        });

img{ 
max-width: 100%; 
display: block 
} 
.c-carousel { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: horizontal; 
  -webkit-box-direction: normal; 
  -ms-flex-direction: row; 
  flex-direction: row; 
  max-width: 100%; 
  margin: -5px 0; } 
  .c-carousel__main { 
    max-width: 200px; 
    -ms-flex-preferred-size: 80%; 
    flex-basis: 80%; 
    padding: 0 5px; } 
  .c-carousel__nav { 
    max-width: 20%; 
    -ms-flex-preferred-size: 20%; 
    flex-basis: 20%; 
    padding: 0 5px; 
    margin: -5px 0; } 
  .c-carousel__nav-item { 
    padding: 5px 0; } 
 
.js-scroll .slick-list.draggable { 
    overflow-y: scroll; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> 
 
<div class="c-carousel"> 
                  <div class="c-carousel__main js-slider-for"> 
                    <div class="c-carousel__item"><img src="https://www.uscreditcardguide.com/wp-content/uploads/why-is-cat-scared-rain-thunder.png"></div> 
                    <div class="c-carousel__item"><img src="https://www.uscreditcardguide.com/wp-content/uploads/why-is-cat-scared-rain-thunder.png"></div> 
                    <div class="c-carousel__item"><img src="https://www.uscreditcardguide.com/wp-content/uploads/why-is-cat-scared-rain-thunder.png"></div> 
                    <div class="c-carousel__item"><img src="https://www.uscreditcardguide.com/wp-content/uploads/why-is-cat-scared-rain-thunder.png"></div> 
                  </div> 
                  <div class="c-carousel__nav js-slider-nav js-scroll"> 
                    <div class="c-carousel__nav-item"><img src="https://www.uscreditcardguide.com/wp-content/uploads/why-is-cat-scared-rain-thunder.png"></div> 
                    <div class="c-carousel__nav-item"><img src="https://www.uscreditcardguide.com/wp-content/uploads/why-is-cat-scared-rain-thunder.png"></div> 
                    <div class="c-carousel__nav-item"><img src="https://www.uscreditcardguide.com/wp-content/uploads/why-is-cat-scared-rain-thunder.png"></div> 
                    <div class="c-carousel__nav-item"><img src="https://www.uscreditcardguide.com/wp-content/uploads/why-is-cat-scared-rain-thunder.png"></div> 
                  </div> 
                </div>