Slick Slider with Thumbnails

by Leonardo Trimarchi

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="http://placehold.it/1200x600&text=one" alt="One">
					<figcaption>Caption for image one. <a href="#one">Read more</a>
					</figcaption>
				</figure>
				<figure>
					<img src="http://placehold.it/1200x600&text=two" alt="One">
					<figcaption>Caption for image two. <a href="#two">Read more</a>
					</figcaption>
				</figure>
				<figure>
					<img src="http://placehold.it/1200x600&text=three" alt="One">
					<figcaption>Caption for image three. <a href="#three">Read more</a>
					</figcaption>
				</figure>
				<figure>
					<img src="http://placehold.it/1200x600&text=four" alt="One">
					<figcaption>Caption for image four. <a href="#four">Read more</a>
					</figcaption>
				</figure>
				<figure>
					<img src="http://placehold.it/1200x600&text=five" alt="One">
					<figcaption>Caption for image five. <a href="#five">Read more</a>
					</figcaption>
				</figure>
			</div>
			
			<!-- THUMBNAILS -->
			<div class="slider-nav-thumbnails">
				<div><img src="http://placehold.it/1200x600&text=one" alt="One">
				</div>
				<div><img src="http://placehold.it/1200x600&text=two" alt="Two">
				</div>
				<div><img src="http://placehold.it/1200x600&text=three" alt="Three">
				</div>
				<div><img src="http://placehold.it/1200x600&text=four" alt="Four">
				</div>
				<div><img src="http://placehold.it/1200x600&text=five" alt="Five">
				</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: true,
 	fade: false,
 	asNavFor: '.slider-nav-thumbnails',
 });

 $('.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');
});