Slick slider demo

http://community.sitepoint.com/t/how-to-make-a-mutliple-items-slider/194539/

by Nick Hulea

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="slider">
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
</div>

<div class="slider-preview">
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
</div>

CSS

.slider,
.slider-preview {
  width: 650px;
  margin: 0 auto;
}

.slider,
.slider-preview {
  width: 650px;
  margin: 0 auto;
}

img {
  width: 200px;
  height: 200px;
}

.slider-preview img {
  width: 100px;
  height: 100px;
}

JavaScript

$('.slider').slick({
  dots: false,
  infinite: true,
  cssEase: 'linear',
  asNavFor: '.slider-preview'
});

$('.slider-preview').slick({
  slidesToShow: 5,
  slidesToScroll: 1,
  dots: false,
  infinite: true,
  cssEase: 'linear',
  asNavFor: '.slider',
  centerMode: true,
});