Syncing Three Slick Sliders

http://stackoverflow.com/q/41819533/

by Raloynner

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">
<div class="slider slider-x">
  <div><h3>2015</h3></div>
  <div><h3>2014</h3></div>
  <div><h3>2013</h3></div>
  <div><h3>2012</h3></div>
  <div><h3>2011</h3></div>
  <div><h3>2010</h3></div>
  <div><h3>2009</h3></div>
  <div><h3>2008</h3></div>
  <div><h3>2007</h3></div>
  <div><h3>2006</h3></div>
  <div><h3>2005</h3></div>
  <div><h3>2004</h3></div>
  <div><h3>2003</h3></div>
  <div><h3>2002</h3></div>
  <div><h3>2001</h3></div>
  <div><h3>2000</h3></div>
  <div><h3>1995</h3></div>
</div>

<div class="slider slider-nav">
  <div><h3>2015</h3></div>
  <div><h3>2014</h3></div>
  <div><h3>2013</h3></div>
  <div><h3>2012</h3></div>
  <div><h3>2011</h3></div>
  <div><h3>2010</h3></div>
  <div><h3>2009</h3></div>
  <div><h3>2008</h3></div>
  <div><h3>2007</h3></div>
  <div><h3>2006</h3></div>
  <div><h3>2005</h3></div>
  <div><h3>2004</h3></div>
  <div><h3>2003</h3></div>
  <div><h3>2002</h3></div>
  <div><h3>2001</h3></div>
  <div><h3>2000</h3></div>
  <div><h3>1995</h3></div>
</div>

SCSS

$c1: #3a8999;
$c2: #e84a69;
.slider-nav{
  padding: 0 30px;
}
.slick-slide {
  background: $c1;
  color: white;
  padding: 40px 0;
  font-size: 30px;
  font-family: "Arial", "Helvetica";
  text-align: center;
}

.slick-arrow:before {
  color: black;    
}

.slick-dots {
  bottom: -30px;
}

.slick-slide:nth-child(odd) {
  background: $c2;
}

.slider {
 margin: 0 30px;
}
.slick-prev{
  left: 0;
}
.slick-next{
  right: 0;
}

JavaScript

$('.slider-x').slick({
  arrows: false,
  asNavFor: '.slider-for,.slider-nav',
});
$('.slider-nav').slick({
  arrows: true,
  asNavFor: '.slider-for,.slider-x',
  centerMode: false,
  dots: false,
  focusOnSelect: true,
  slidesToShow: 5,
});