jquery - 仅用一个导航器控制两个光滑的 slider

Question

我正在使用 Slick.js 中的 slider 同步，并且需要仅使用一个导航器控制另外两个导航器。

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

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