Slick slider demo

by Raloynner

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>
<h2>Slider demo</h2>
<div class="slider-for ">
<div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png"/>
    </div>
  </div>  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
    </div>
  </div>
</div>
<div class="slider-for ">
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png"/>
    </div>
  </div>  
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
    </div>
  </div>
</div>

JavaScript

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