How to allow to use JQuery selectors for the asNavFor attirbute

Thank you.

Have you installed Slick Example?

IIRC, 5 out of 6, more or less, are using asNavFor.

No custom codes are needed.

They would sync automatically as long as you provide the required optionset.

That asNavFor option can and should be left empty as noted there for being overridden by formatters.

I might misunderstand, so please detail your use case?

My use case is as follows:

I am having a paragraph "Slide Tabs" with a sub paragraph "Tab". The paragraph field "Tab" in "Slide Tabs" in redered by views via "Views field formatter." In the View I have a slick slide display of the view "block" with a slick attachement view "tabs" that control each other by asNavFor

As a paragraph this can be rendered multiple times, so if the asNavFor target would be .slide-block it would control all slide tabs paragraphs which it should not.

One solution would be to overwrite the asNavFor attribute by hook_slick_optionset_alter with $slick->setSetting('asNavFor', $target), but the available variables are missing the view dom_id which would enable to call .view-dom-[dom_id] .slide-block

The better way is to achieve this by a JQuery asNavFor target that calls the parent .view class and subsequent the class of the other slick slide.

In general I would like to be able to use such more complex approaches of using slick. AsNavFor is central to achieve these.

Another solution would be to provide the views dom_id via hook_blazy_settings_alter or hook_slick_settings_alter or an object extension of blazy as a variable in $settings of my implenation of hook_slick_optionset_alter in my custom_slick_tabs_slick_optionset_alter.

Something like:

function custom_slick_tab_slick_optionset_alter(\Drupal\slick\Entity\Slick &$slick, array &$settings) {
  $target = ' . ' . $settings['view_dom_id'] . '.myslidertarget';
  $slick->setSetting('asNavFor', $target)
}

But I could not figure out how to do that.

> but the available variables are missing the view dom_id which would enable to call .view-dom-[dom_id] .slide-block
Not sure if relevant to your needs, an existing sample is like here:
https://git.drupalcode.org/project/blazy/-/blob/8.x-2.22/src/BlazyAlter....

You can pass/write the found views_dom_id here to blazies object, and access it directly here for immediate change, or anywhere else.

You can also get some pre-defined useful data at blazies object, such as blazies.css.id or blazies.view blazies.formatter array, etc.

Most of blazies data are alterable via the provided hook_alters seen at blazy.api.php or slick.api.php.

If not, perhaps regular hook_preprocess_slick, etc. are more direct, including changing asnavfor targets which are normally hard-coded to the .slick IDs to be simple. Similar blazies and slicks objects are also available at hook_proprocess.

Thanks, but I am still not sure how to pass the dom_id to hook_slick_optionset_alter, blazySettingsAlter does not effect anything here. Being able to use jQuery targets forasNavFor would be the better solution.

Basically asNavFor is defined and associated by IDs for being unique and easily/ automatically defined:
https://git.drupalcode.org/project/slick/-/blob/3.0.2/templates/slick.th...

Such a design works perfectly for many carousels on a page. Normally inbuilt asNavFor is where both Slick main and Slick Thumbnail navigation is wrapped within slick-wrapper DIV.

Association is the only key since you must define asNavfor at both main and thumbnail displays.
You may want to see and learn how the HTML source of data-slick is constructed for both sliders to reconstruct your own.

To break such a design, you just need to create separate sliders, and inject asNavFor as outlined above. Overriding existing designs might be done, but require more efforts.

ID is not a must, might be classes, just be sure it exists on a page only once.

I hope you can make it one or another :)

Feel free to get in touch for paid custom works.

Thanks.

Automatically closed - issue fixed for 2 weeks with no activity.