Slick slider with thumbnail navigation

by Elvis Sedić

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <div class="videos-slider-2">
        <div>
          <div class="bs-overlay">
            <img src="https://img.youtube.com/vi/bjR8nZVkmfA/hqdefault.jpg" alt="" />
            <div class="bs-overlay-panel bs-overlay-background bs-overlay-top text-center text-uppercase">
              <h4>Investors' week - The view of business potentials at the Slovenian coast</h4>
            </div>
            <a class="bs-position-cover video-modal" data-video="https://www.youtube.com/embed/bjR8nZVkmfA" data-toggle="modal" data-target="#videoModal"></a>
          </div>
        </div>
        <div>
          <div class="bs-overlay">
            <img src="https://img.youtube.com/vi/xSOuvJo-LyI/hqdefault.jpg" alt="" />
            <div class="bs-overlay-panel bs-overlay-background bs-overlay-top text-center text-uppercase">
              <h4>Mayor's reception for Investo Expo, FDI Summit and Ljubljana Forum</h4>
            </div>
            <a class="bs-position-cover video-modal" data-video="https://www.youtube.com/embed/xSOuvJo-LyI" data-toggle="modal" data-target="#videoModal"></a>
          </div>
        </div>
        <div>
          <div class="bs-overlay">
            <img src="https://img.youtube.com/vi/GaA_JeWmlv4/hqdefault.jpg" alt="" />
            <div class="bs-overlay-panel bs-overlay-background bs-overlay-top text-center text-uppercase">
              <h4>Investo Expo, day 2: The Ljubljana declaration and VZMD corporate governance award to Gorenje</h4>
            </div>
        ...

CSS

body {
  padding: 1em;
}
/* VIDEO SLIDER */
.videos-slider-1 h4,
.videos-slider-2 h4 {
  font-size: 14px;
}

/* OVERLAY */
.bs-position-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.bs-overlay {
  display: inline-block;
  position: relative;
  max-width: 100%;
  vertical-align: middle;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  margin: 0;
}
.bs-overlay:hover .bs-overlay-panel.bs-overlay-top {
  bottom: 0;
  opacity: 1;
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
}
.bs-overlay-panel.bs-overlay-top {
  top: auto;
}
.bs-overlay-background {
  background: rgba(0,0,0,.8);
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
  transition-duration: .3s;
  transition-timing-function: ease-out;
  transition-property: opacity,transform,filter;
}
.bs-overlay-panel {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  padding: 20px;
  color: #fff;
}
.bs-overlay>:first-child,
.bs-overlay-panel>:last-child {
  margin-bottom: 0;
}
.bs-overlay:hover{
  cursor: pointer;
}
.bs-overlay:hover:after {
  background-image: url(http://shrani.si/f/2Q/ze/2CtEIRsH/youtubeplayred1.png);
}
.bs-overlay:after {
  background-image: url(http://shrani.si/f/3o/DK/1A24SBYG/youtubeplaydark1.png);
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 54px;
  height: 38px;
  background-size: cover;
}
.slider-nav-thumbnails {
  margin-top: 10px;
}
.slider-nav-thumbnails .slick-slide {
  cursor: pointer;
  outline: none;
}
.slider-nav-thumbnails .slick-slide.slick-current.slick-active {
  opacity: 1;
}
.slider-nav-thumbnails .slick-slide img {
  padding: 5px;
  background: transparent;;
}
.slider-nav-thumbnails .slick-slide.slick-current.slick-active img {
  background: #000;
}
.slider-nav-thumbnails img {
  width: 40px;
  margin: 0 5px;
}
.slider-nav-thumbnails .slick-slide:first-child...

JavaScript

$('.videos-slider-2').slick({
  autoplay: true,
  slidesToScroll: 1,
  slidesToShow: 1,
  arrows: false,
  dots: false,
  asNavFor: '.slider-nav-thumbnails',
});

$('.slider-nav-thumbnails').slick({
  autoplay: true,
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '.videos-slider-2',
  dots: true,
  focusOnSelect: true,
  variableWidth: true
});

// Remove active class from all thumbnail slides
$('.slider-nav-thumbnails .slick-slide').removeClass('slick-active');

// Set active class to first thumbnail slides
$('.slider-nav-thumbnails .slick-slide').eq(0).addClass('slick-active');

// On before slide change match active thumbnail to current slide
$('.videos-slider-2').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
  var mySlideNumber = nextSlide;
  $('.slider-nav-thumbnails .slick-slide').removeClass('slick-active');
  $('.slider-nav-thumbnails .slick-slide').eq(mySlideNumber).addClass('slick-active');
});