<div class="combo">
  <div class="slider-for">
    <div class="item" style="background: url(https://source.unsplash.com/random/1600x900?1) no-repeat center center / cover;">
    </div>
    <div class="item" style="background: url(https://source.unsplash.com/random/1600x900?2) no-repeat center center / cover;">
    </div>
    <div class="item" style="background: url(https://source.unsplash.com/random/1600x900?3) no-repeat center center / cover;">
    </div>
    <div class="item" style="background: url(https://source.unsplash.com/random/1600x900?4) no-repeat center center / cover;">
    </div>
    <div class="item" style="background: url(https://source.unsplash.com/random/1600x900?5) no-repeat center center / cover;">
    </div>
    <div class="item" style="background: url(https://source.unsplash.com/random/1600x900?6) no-repeat center center / cover;">
    </div>
    <div class="item" style="background: url(https://source.unsplash.com/random/1600x900?7) no-repeat center center / cover;">
    </div>
    <div class="item" style="background: url(https://source.unsplash.com/random/1600x900?8) no-repeat center center / cover;">
    </div>
    <div class="item" style="background: url(https://source.unsplash.com/random/1600x900?9) no-repeat center center / cover;">
    </div>
    <div class="item" style="background: url(https://source.unsplash.com/random/1600x900?10) no-repeat center center / cover;">
    </div>
    <div class="item" style="background: url(https://source.unsplash.com/random/1600x900?11) no-repeat center center / cover;">
    </div>
    <div class="item" style="background: url(https://via.placeholder.com/1200x800) no-repeat center center / cover;">
    </div>
  </div>
  <div class="slider-nav">
    <div class="item">1990</div>
    <div class="item">1991</div>
    <div class="item">1992</div>
    <div class="item">1993</div>
    <div class="item">1994</div>
    <div class="item">1995</div>
    <div class="item">1996</div>
    <div class="item">1997</div>
    <div class="item">1998</div>
    <div class="item">1999</div>
    <div class="item">2000</div>
    <div class="item">2001</div>
  </div>
</div>

body {
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}
.slick-slider {
  margin-bottom: 0;
}
.slick-next {
  right: 20px;
  z-index: 1;
}

.slick-prev {
  left: 20px;
  z-index: 1;
}
.combo {
  position: relative;
  overflow: hidden;
}
.slider-for {
  .item {
    height: 100vh;
  }
}
.slider-nav {
  position: absolute;
  bottom: 20px;
  width: 100%;

  .item {
    text-align: center;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    line-height: 1em;

    &:hover {
      cursor: pointer;
    }

    &:hover,
    &:focus {
      outline: none;
    }

    &.slick-current {
      font-size: 20px;
      font-weight: bold;
    }
  }
}

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true,
  asNavFor: '.slider-nav',
  swipeToSlide: true,
  touchThreshold: 5000
});
$('.slider-nav').slick({
  slidesToShow: 7,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  arrows: false,
  centerMode: true,
  focusOnSelect: true,
  touchThreshold: 5000,
  swipeToSlide: true,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 3
      }
    }
  ]
});