仅使用一个导航器控制两个滑动滑块

Question

我使用的滑块从Slick.js同步，并且需要使用另一个导航器中的一个导航器进行控制。

<div class="main"> 
    <div>content</div> 
    <div>content</div> 
</div> 
<div class="navigator"> 
    <div>nav1</div> 
    <div>nav2</div> 
</div> 
<div class="secondary"> 
    <div>content related with main1</div> 
    <div>content related with main2</div> 
</div> 

这是针对

var slickMainFrame = { 
    slidesToShow: 1, 
    slidesToScroll: 1,  
    arrows: true, 
    fade: true, 
    asNavFor: '.navigator', 
}; 

var slickNav = { 
    dots: false, 
    slidesToShow: 2, 
    slidesToScroll: 1,  
    arrows: true, 
    fade: true, 
    asNavFor: '.main', 
    speed: 500, 
}; 

$('.main').slick(slickMainFrame); 
$('.secondary').slick(slickMainFrame); 
$('.navigator').slick(slickNav); 

这不是工作在我所有的js代码。我一直在使用slickNav的asNavFor属性为分开的阵列或结肠尝试，但它不工作都不是。 asNavFor： '主要，.secondary'

Answer 1

试试这个：

HTML

<div class="main asnavForClass"> 
    <div>content</div> 
    <div>content</div> 
</div> 
<div class="navigator"> 
    <div>nav1</div> 
    <div>nav2</div> 
</div> 
<div class="secondary asnavForClass"> 
    <div>content related with main1</div> 
    <div>content related with main2</div> 
</div> 

的Javascript

var slickMainFrame = { 
    slidesToShow: 1, 
    slidesToScroll: 1,  
    arrows: true, 
    fade: true, 
}; 
var slickNav = { 
    dots: false, 
    slidesToShow: 2, 
    slidesToScroll: 1,  
    arrows: true, 
    fade: true, 
    asNavFor: '.asnavForClass', 
    speed: 500, 

}; 



$('.main').slick(slickMainFrame); 
$('.secondary').slick(slickMainFrame); 
$('.navigator').slick(slickNav); 

Check the JSFiddle for a working example