<!-- slick main -->
<div class="wrapper">
  <div class="slider">
    <div class="slider__slide">
      <img src="http://wallpaperstock.net/tokyo-at-night_wallpapers_11055_1440x900.jpg" alt="image" class="slider__img" />
      <div class="slider__text">
        <h3 class="slider__heading">Slide 1</h3>
        <p class="slider__descr">2 lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="slider__slide">
      <img src="http://www.pixelstalk.net/wp-content/uploads/2016/08/Purple-Seascape-1440-x-900-Wallpaper.jpg" alt="image" class="slider__img" />
      <div class="slider__text">
        <h3 class="slider__heading">Slide 2</h3>
        <p class="slider__descr">3 lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="slider__slide">
      <img src="http://eskipaper.com/images/denver-wallpaper-2.jpg" alt="image" class="slider__img" />
      <div class="slider__text">
        <h3 class="slider__heading">Slide 3</h3>
        <p class="slider__descr">6 lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
  
  <!-- slick thumbnails slider -->
  <div class="thumbs">
    <div class="thumbs__slide">
      <img src="http://wallpaperstock.net/tokyo-at-night_wallpapers_11055_1440x900.jpg" alt="image" class="thumbs__img" />
    </div>
    <div class="thumbs__slide">
      <img src="http://www.pixelstalk.net/wp-content/uploads/2016/08/Purple-Seascape-1440-x-900-Wallpaper.jpg" alt="image" class="thumbs__img" />
    </div>
    <div class="thumbs__slide">
      <img src="http://eskipaper.com/images/denver-wallpaper-2.jpg" alt="image" class="thumbs__img" />
    </div>
  </div>
</div>
* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
  background-color: #333;
}

img {
  max-width: 100%;
  height: auto;
}

.wrapper { // to set slider size
  max-width: 800px;
  margin: 0 auto;
  // outline: 1px solid navy;
}

.slider {
  
  &__slide {
    position: relative;
  }
  
  &__img {
    // height: 500px; // to fit
    // width: 100%; // to fit
  }
  
  &__text {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px 30px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 0.8em;
    text-align: center;
    color: snow;
    text-shadow: gold 0 0 10px;
    background-color: rgba(0, 0, 0, 0.8);
    
    @media screen and (min-width: 380px) {
      font-size: 1em;
    }
  }
  
  &__heading {
    margin: 0;
    margin-bottom: 10px;
  }
  
  &__descr {
    margin: 0;
    margin-bottom: 10px;
  }
}

// slick
.slick-dotted.slick-slider {
  margin-bottom: 0;
  background: #000;
}

.slick-slide {
  outline: 0;
}

.slick-current {
  background-color: maroon;
}

.slick-arrow {
  z-index: 1000;
  
  &.slick-prev,
  &.slick-next {
    width: 40px;
    height: 40px;
    
    &:before {
      font-size: 30px;
      color: maroon;
    }
  }
  
  &.slick-prev {
    left: 20px;
    
  }
  
  &.slick-next {
    right: 20px;
  }
}

.slick-dots {
  top: 10px;
  bottom: auto;
  
  li {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    
    button {
      
      &:before {
        
      }
    }
  }
  
  .slick-active { //active li
    background: maroon;
  }
}

.thumbs {
  
  .slick-track {
    background-color: black;
  }
  
  &__slide {
    padding: 10px;
  }
}
View Compiled
$(document).ready(function() {
  
  var $window = $(window),
      $slider = $('.slider'),
      $thumbSlider = $('.thumbs');
  
  $slider.slick({
    autoplay: true,
    autoplaySpeed: 3000,
    dots: true,
    speed: 1000,
    pauseOnDotsHover: true,
    arrows: true,
    asNavFor: '.thumbs',
    // focusOnSelect: true,
    // swipeToSlide: true,
    // vertical: true,
    // rows: 2,
    // slidesPerRow: 1,
    // centerMode: true,
    // centerPadding: '20px',
    // fade: true
  });
  
  // slick thumbnails
  $thumbSlider.slick({
    mobileFirst: true,
    // скрыть
    slidesToShow: 3,
    slidesToScroll: 1,
    //
    asNavFor: '.slider',
    centerMode: true,
    centerPadding: '20px',
    focusOnSelect: true,
    arrows: false,
    dots: false,
    swipe: false,
    responsive: [
      {
        breakpoint: 560,
        settings: {
          mobileFirst: true,
          slidesToShow: 5,
        }
      }
    ]
  });
  
  // hide or show thumbnail slider according to window size
  $window.on('resize', function() {
    ($window.width() < 420) ?
      $thumbSlider.hide() :
      $thumbSlider.show();
  });
  
});

External CSS

  1. //cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css
  2. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. //cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js