スリックスライダー複数のスライダーを同期させる - 3

Question

滑らかなスライダーを使用しています.3つのスライダーで同期しています。 2つのスライダではうまくいきますが、3つのスライダで3つのスライダを試しても、2つしか動作しません。

例» https://jsfiddle.net/rk0tuoy7/6/

$('.slider-for').slick({ 
 
    slidesToShow: 1, 
 
    slidesToScroll: 1, 
 
    arrows: false, 
 
    fade: false, 
 
    asNavFor: '.slider-nav', 
 
    lazyLoad: 'ondemand' 
 
}); 
 
$('.slider-x').slick({ 
 
    slidesToShow: 1, 
 
    slidesToScroll: 1, 
 
    arrows: true, 
 
    fade: false, 
 
    asNavFor: '.slider-nav', 
 
    lazyLoad: 'ondemand', 
 
    dots: false 
 
}); 
 
$('.slider-nav').slick({ 
 
    centerMode: true, 
 
    centerPadding: '60px', 
 
    slidesToShow: 5, 
 
    slidesToScroll: 1, 
 
    asNavFor: '.slider-for', 
 
    dots: true, 
 
    focusOnSelect: true, 
 
    lazyLoad: 'ondemand' 
 
});

@import url('//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css'); 
 
@import url('//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css'); 
 

 
.slick-slide { 
 
    background: #3a8999; 
 
    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: #e84a69; 
 
}

<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> 
 

 
<div class="slider slider-for"> 
 
    <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> 
 

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

Answer 1

asNavForオプションは、通常のCSSセレクタとして機能しているようです。私は、デフォルト値を持つオプションを削除した

$('.slider-for').slick({ 
    asNavFor: '.slider-nav,.slider-x', 
}); 
$('.slider-x').slick({ 
    asNavFor: '.slider-for,.slider-nav', 
}); 
$('.slider-nav').slick({ 
    asNavFor: '.slider-for,.slider-x', 
}); 

：カンマで区切って複数のクラスを一覧表示することができます。

結果を確認してください：https://jsfiddle.net/glebkema/b6c2ayeg/

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

@import url('//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css'); 
 
@import url('//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css'); 
 

 
.slick-slide { 
 
    background: #3a8999; 
 
    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: #e84a69; 
 
} 
 

 
.slider { 
 
    margin: 0 30px; 
 
}

<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> 
 

 
<div class="slider slider-for"> 
 
    <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> 
 

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>