Slick synced slider

HTML

<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/css/style.css">
<h2>Slider as Nav For / sync</h2>
<div class="blue">
  <div class="slider slider-for">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
  <div class="slider slider-nav">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
  <br><br><br><br>
</div>

CSS

body, html {
  background: #3498db;   
}

JavaScript

$(document).ready(function () {
    $('.slider-for').slick({
        arrows: false,
        slidesToShow: 2,
        fade: true,
       
        asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
        slidesToShow: 3,
        asNavFor: '.slider-for',
       
        focusOnSelect: true,
        fade: true,
        dots: false,
    		prevArrow: false,
    		nextArrow: false
    });
});