Syncing more than one slider with asNavFor for multiple sliders on the same page with each function

[crispy-customs]

short description of the bug / issue, provide more detail below. I'm trying to sync multiple sliders with asNavFor to multiple sliders on the same page, therefore i run an each function that sets the same settings for every slider. The issue is that I can not specify the navigation sliders using variables.

https://codepen.io/n-bagge/pen/Exebyaw

Test commented asNavFor settings in the codepen.

use this jsfiddle to reproduce your bug: http://jsfiddle.net/simeydotme/fmo50w7n/ we will likely close your issue without it.

====================================================================

Steps to reproduce the problem

1. asNavFor does not accept the format asNavFor: variable_1, variable_2
2. asNavFor does not accept the format asNavFor: [variable_1, variable_2]
3. asNavFor does accept the format asNavFor: '#navigation_1, #navigation_2' but it is not scalable unless every slider is specified as a separate slick function, far from ideal.

====================================================================

What is the expected behaviour?

I need to specify the location of the navigation sliders in the each function for it to scale with multiple sliders on the same page.

====================================================================

What is observed behaviour?

No option to specify multiple navigation sliders using variables.

====================================================================

More Details

• Which browsers/versions does it happen on? Firefox 110.0.1
• Which jQuery/Slick version are you using? Jquery 3.6.0 / Slick 1.8.1
• Did this work before? No

[hippiewho]

This is because internally this library uses jquery to select the asNavFor item(s).

1. The comma-separated version isnt a valid object value since the comma would mean variable_2 is another property.
2. The array doesn't work because (AFAIK) the jquery selector doesnt accept arrays,
3. Comma-separated string works because the jquery selector does accept this format.

It looks like a fix would be fairly easy.

Relevant code form Slick.js

    Slick.prototype.getNavTarget = function() {

        var _ = this,
            asNavFor = _.options.asNavFor;

        if ( asNavFor && asNavFor !== null ) {
            asNavFor = $(asNavFor).not(_.$slider);
        }

        return asNavFor;

    };

[crispy-customs]

Ok, so how would one go about to fix this? rewrite the asNavFor defined in slick? I'm not sure what that would look like.

[hippiewho]

Yes, if you really want to pass an array of DOM elements or jQuery objects, it would require altering the getNavTarget() function.

Specifically

        if ( asNavFor && asNavFor !== null ) {
            asNavFor = $(asNavFor).not(_.$slider);
        }

Alternatively, you could use a css class name to identify the other carousel(s). asNavFor: '.dependent-navigations' and just add the css class to the other navigations so you can target them. Honestly, this is probably the easiest way to accomplish what you want.