Slick synced slider

by Rich Costello

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,
        fade: true,
        asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
        slidesToShow: 6, // 3,
        asNavFor: '.slider-for',
        centerMode: true,
        focusOnSelect: true,
        dots: false,
    		prevArrow: false,
    		nextArrow: false
    });
});