jquery - たった 1 つのナビゲーターで 2 つの滑らかなスライダーを制御

Question

Slider Syncing を使用してSlick.jsおり、1 つのナビゲーターと他の 2 つのナビゲーターだけで制御する必要があります。

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

そして、これはそのための私の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'