仅用一个导航器即可控制两个光滑的滑块

我正在使用Slider Syncing，Slick.js并且只需要用一个导航器控制其他两个导航器即可。

  
content
  
content


  
nav1
  
nav2


  
content related with main1
  
content related with main2

这是我的js代码

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

这根本不起作用。我尝试将slickNav的asNavFor属性用作数组或冒号分隔，但两者均不起作用。asNavFor：'.main，.secondary'

尝试这个：

的HTML

  
content
  
content


  
nav1
  
nav2


  
content related with main1
  
content related with main2

Java脚本

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

查看JSFiddle以获取有效示例