Slick Slider with Thumbnails

by Fahd Murtaza

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<div class="row">
  <div class="large-7 medium-8 columns">

    <!-- MAIN SLIDES -->
    <div class="slider">
      <figure>
        <img src="https://via.placeholder.com/468x300/000000/EEEEEE?text=Please+Visit+fahdmurtaza.com" alt="One">
        <figcaption>Visit <a href="https://www.fahdmurtaza.com">my website</a>
        </figcaption>
      </figure>

      <figure>
        <img src="https://via.placeholder.com/468x300/EEEEEE/000000?text=Visit+fahdmurtaza.com+Now" alt="Visit fahdmurtaza.com Now">
        <figcaption>Visit <a href="https://www.fahdmurtaza.com">my website</a>
        </figcaption>
      </figure>

      <figure>
        <img src="https://via.placeholder.com/468x300/000000/EEEEEE?text=Have+You+Visited_it+yet?+Now" alt="Visit fahdmurtaza.com Now">
        <figcaption>Visit <a href="https://www.fahdmurtaza.com">my website</a>
        </figcaption>
      </figure>

    </div>

    <!-- THUMBNAILS -->
    <div class="slider-nav-thumbnails">
      <div><img src="https://via.placeholder.com/150/000000/EEEEEE?Text=one" alt="One">
      </div>
      <div><img src="https://via.placeholder.com/150/EEEEEE/000000?Text=two" alt="Two">
      </div>
      <div><img src="https://via.placeholder.com/150/000000/EEEEEE?Text=three" alt="Three">
      </div>

    </div>

  </div>
</div>

CSS

.slider-nav-thumbnails .slick-slide {
  opacity: 0.5;
}

.slider-nav-thumbnails .slick-slide.slick-active {
  opacity: 1;
  background: green;
}

JavaScript

$('.slider').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   fade: true,
   asNavFor: '.slider-nav-thumbnails',
   cssEase: 'ease',
   touchThreshold: 100
 });

 $('.slider-nav-thumbnails').slick({
   slidesToShow: 5,
   slidesToScroll: 1,
   asNavFor: '.slider',
   dots: true,
   focusOnSelect: 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
 $('.slider').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');
 });