Javascript 滑动条同步多个滑动条-3_Javascript_Jquery_Slider_Slick.js

Javascript 滑动条同步多个滑动条-3

javascript jquery

Javascript 滑动条同步多个滑动条-3,javascript,jquery,slider,slick.js,Javascript,Jquery,Slider,Slick.js,我使用滑溜滑块与3个滑块同步。使用2个滑块可以很好地工作，但是当我尝试使用3个类的3个滑块时，仍然只有2个可以工作示例» $（'.slider for'）。光滑({ 幻灯片放映：1，幻灯片滚动：1，箭头：错，淡出：错， asNavFor:“.slider nav”，懒洋洋的：“ondemand” }); $（'.slider-x'）。光滑({ 幻灯片放映：1，幻灯片滚动：1，箭头：是的，淡出：错， asNavFor:“.slider nav”，懒洋洋的：“ondemand”，

我使用滑溜滑块与3个滑块同步。使用2个滑块可以很好地工作，但是当我尝试使用3个类的3个滑块时，仍然只有2个可以工作

示例»

$（'.slider for'）。光滑({
幻灯片放映：1，
幻灯片滚动：1，
箭头：错，
淡出：错，
asNavFor:“.slider nav”，
懒洋洋的：“ondemand”
});
$（'.slider-x'）。光滑({
幻灯片放映：1，
幻灯片滚动：1，
箭头：是的，
淡出：错，
asNavFor:“.slider nav”，
懒洋洋的：“ondemand”，
圆点：错
});
$（'.slider nav'）。光滑({
centerMode：对，
中心填充：“60px”，
幻灯片放映：5，
幻灯片滚动：1，
asNavFor:“。滑块用于”，
点：是的，
焦点选择：正确，
懒洋洋的：“ondemand”
});
导入url（'//cdnjs.cloudflare.com/ajax/libs/slick carousel/1.6.0/slick.css'）；
@导入url（'//cdnjs.cloudflare.com/ajax/libs/slick carousel/1.6.0/slick theme.css'）；
.滑滑梯{
背景：#3a8999；
颜色：白色；
填充：40px0；
字体大小：30px；
字体系列：“Arial”、“Helvetica”；
文本对齐：居中；
}
.光滑的箭：之前{
颜色：黑色；
}
.圆点{
底部：-30px；
}
.光滑滑梯：第n个孩子（单数）{
背景：#e84a69；
}

似乎

asNavFor

选项可以作为一个普通的CSS选择器工作。您可以列出几个用逗号分隔的类：

$（'.slider for'）。光滑({
asNavFor:'.slider导航，.slider-x',，
});
$（'.slider-x'）。光滑({
asNavFor:'.slider for，.slider nav'，
});
$（'.slider nav'）。光滑({
asNavFor:“.slider用于，.slider-x”，
});

我删除了具有默认值的选项

请检查结果：

$（'.slider for'）。光滑({
箭头：错，
asNavFor:'.slider导航，.slider-x',，
});
$（'.slider-x'）。光滑({
箭头：是的，
asNavFor:'.slider for，.slider nav'，
});
$（'.slider nav'）。光滑({
箭头：是的，
asNavFor:“.slider用于，.slider-x”，
centerMode：对，
中心填充：“60px”，
点：是的，
焦点选择：正确，
幻灯片放映：5，
});
导入url（'//cdnjs.cloudflare.com/ajax/libs/slick carousel/1.6.0/slick.css'）；
@导入url（'//cdnjs.cloudflare.com/ajax/libs/slick carousel/1.6.0/slick theme.css'）；
.滑滑梯{
背景：#3a8999；
颜色：白色；
填充：40px0；
字体大小：30px；
字体系列：“Arial”、“Helvetica”；
文本对齐：居中；
}
.光滑的箭：之前{
颜色：黑色；
}
.圆点{
底部：-30px；
}
.光滑滑梯：第n个孩子（单数）{
背景：#e84a69；
}
.滑块{
利润率：0.30px；
}