同时将多个滑动滑块同步

时间:2016-05-23 23:36:05

标签: javascript jquery slick.js

我正在使用Slick Slider并希望将3个滑块同步。

我有一个问题的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' });

我可以让滑块1与滑块2同步,我可以让滑块2与滑块3同步,但我无法让所有3个滑块同时工作。我有办法让这个工作吗?

由于

2 个答案:

答案 0 :(得分:6)

这样的事情怎么样:

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类,以及一个带编号的滑块类,如果你需要在其他时间对它们做不同的事情。

答案 1 :(得分:0)

只需在asNavFor中使用多个类。例如:

asNavFor: $('.slider, .slider2, .slider3')