Sync Multiple Slick sliders together

Question

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

Coworker

Answer 1

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.

Slemmer

How can i use this while having different settings for each slider? – Jesicajeske

You may want to ask that as a new question. – Slemmer

@RoeeYossef I need this answer as well, I need second slider to have fading effects and no arrows – Renvoi

Just did - #41871350 @Slemmer – Jesicajeske

Answer 2

Just use multiple classes in the asNavFor. For example:

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

Felisha