slick slider with thumbnails

slick slider with thumbnails jsfiddle, thumbnail slider

by Vishnuprasad ps

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="col-sm-7">

    <ul class="slider-for">
      <li><img src="https://via.placeholder.com/800x600" class="img-responsive"></li>
      <li><img src="https://via.placeholder.com/800x600" class="img-responsive"></li>
      <li><img src="https://via.placeholder.com/800x600" class="img-responsive"></li>
      <li><img src="https://via.placeholder.com/800x600" class="img-responsive"></li>
      <li><img src="https://via.placeholder.com/800x600" class="img-responsive"></li>
    </ul>
    <ul class="slider-nav">
      <li><img src="https://via.placeholder.com/800x600" class="img-responsive"></li>
      <li><img src="https://via.placeholder.com/800x600" class="img-responsive"></li>
      <li><img src="https://via.placeholder.com/800x600" class="img-responsive"></li>
      <li><img src="https://via.placeholder.com/800x600" class="img-responsive"></li>
      <li><img src="https://via.placeholder.com/800x600" class="img-responsive"></li>
    </ul>

  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

CSS

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.slider-for,
.slider-nav {
  width: 100%;
  display: inline-block;
}

.slider-for li {
  float: none;
}

.slider-nav li {
  padding: 2px;
  cursor: pointer;
}

.slider-nav li img {
  opacity: 0.5;
}
.slider-nav .slick-slide.slick-center img {
  opacity: 1;
}

JavaScript

$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: false,
    asNavFor: '.slider-nav'
  });
  $('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true,
    centerMode: true,
    focusOnSelect: true
  });