Slick Slider 同步多个滑块 - 3 [英] Slick Slider Syncing Multiple sliders - 3
本文介绍了Slick Slider 同步多个滑块 - 3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用带有 3 个滑块的光滑滑块同步.使用 2 个滑块可以正常工作，但是当我尝试使用 3 个具有 3 个类的滑块时，仍然只有 2 个在工作.
I'm using slick Slider Syncing with 3 sliders. With 2 sliders it works fine but when I try with 3 sliders with 3 classes still only 2 are working.
示例 »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>推荐答案
似乎 asNavFor 选项可以用作普通的 CSS 选择器.您可以列出几个用逗号分隔的类:
It seems that the asNavFor option works as a normal CSS selector. You can list several classes separated by commas:
$('.slider-for').slick({
asNavFor: '.slider-nav,.slider-x',
});
$('.slider-x').slick({
asNavFor: '.slider-for,.slider-nav',
});
$('.slider-nav').slick({
asNavFor: '.slider-for,.slider-x',
});
我删除了具有默认值的选项.
I've removed options that have default values.
请检查结果: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>这篇关于Slick Slider 同步多个滑块 - 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
