I'm working with Slick Slider and would like to sync 3 sliders together.

I have a JSfiddle of my problem here:

/

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

I can get slider 1 to sync with slider 2, and I can get slider 2 to sync with slider 3, but I can't get all 3 working together. Is there a way I could get this to work?

Thanks

I'm working with Slick Slider and would like to sync 3 sliders together.

I have a JSfiddle of my problem here:

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

I can get slider 1 to sync with slider 2, and I can get slider 2 to sync with slider 3, but I can't get all 3 working together. Is there a way I could get this to work?

Thanks

• javascript
• jquery
• slick.js

2 Answers 2

How about something like this:

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

Now all the sliders have both a generic slider class, as well as a numbered slider class if you need to do different things to them at some other time.

Just use multiple classes in the asNavFor. For example:

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