该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;
}
2015
2014
2013
2012
2011
2010
2009
2008
2007
2006
2005
2004
2003
2002
2001
2000
1995
2015
2014
2013
2012
2011
2010
2009
2008
2007
2006
2005
2004
2003
2002
2001
2000
1995
2015
2014
2013
2012
2011
2010
2009
2008
2007
2006
2005
2004
2003
2002
2001
2000
1995