javascript - 将多个 Slick slider 同步在一起

Question

我正在使用 Slick Slider，并希望将 3 个 slider 同步在一起。

我这里有一个关于我的问题的 JSfiddle:

https://jsfiddle.net/rk0tuoy7/1/

HTML:

<section class="slider">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>

<section class="slider2">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>

<section class="slider3">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>

JS:

$(".slider").slick({});
$(".slider2").slick({ asNavFor: '.slider' });
$(".slider3").slick({ asNavFor: '.slider2' });

我可以让 slider 1 与 slider 2 同步，我可以让 slider 2 与 slider 3 同步，但我无法让所有 3 个一起工作。有什么方法可以让它发挥作用吗？

谢谢

Answer 1

这样的事情怎么样:

https://jsfiddle.net/rk0tuoy7/2/

HTML:

<section class="slider slider1">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>

<section class="slider slider2">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>

<section class="slider slider3">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>

JS:

$(".slider").slick({ asNavFor: '.slider' });

现在所有的 slider 都有一个通用的 slider 类，如果您需要在其他时间对它们做不同的事情，还有一个编号的 slider 类。