Slick: Prefer data-slick to general settings

[SventB]

When using the attribute "data-slick"...

<div class="slick" data-slick='{"dots":false,"arrows":true}'>

together with a set of general options...

$('.slick').slick({
    dots: true,
    infinite: true
});

the default options are preferred: In the example above, the slider has dots although the setting in the data-attribute says "no dots".

For me, it seems more logical if the settings in "data-slick" overwrites the general options. For usage in a CMS this is highly recommended.

[leggomuhgreggo]

Interesting. I can see the logic there. Follows the same hierarchical pattern of inline CSS vs linked.

[kenwheeler]

Let's get this flagged as a bug and assigned.

[SventB]

Ok, this was an easy one ;)
Thank you for your fast reaction.

[simeydotme]

woah shit.... :cold_sweat:

@kenwheeler I know we've not exactly been strict with the semver bizniz , but this could have a huge impact... I personally think this should be backed out and put in 2.0.0.

[kenwheeler]

I haven't cut a release for this yet, but this round of fixes will likely be 2.0. The real 2.0 landing at 3.0 or 4

[Dan503]

This is the completely wrong approach in my mind.

The JS will typically be called on a generic .carousel class.

The data attribute is called on the individual carousels. This gives much finer control of the settings to the data attribute.

If there are arguments for both sides then can we have a setting that determines what batch of settings have priority?

[lincolnlemos]

I agreed with @Dan503
Will be great if we can pass an arg in JS to set what is the priority.

[Dan503]

I re-read the issue. I guess I was somehow confused. I thought the issue was advocating for the default settings to override the data attribute settings when I wrote that comment. 😖

@lincolnlemos if you want to have the js settings take priority, maybe just remove the data-slick attribute from the element before initialization.

[vikaspaturi]

Hi Team,

How do we pass this as the Data attribute, I am looking for customPaging for below.

$(".cmp-carousel-single").slick({
slidesToShow: 1,
dots: true,
infinite: false,
arrows: true,
customPaging: function (slider, i) {
return (
' .attr("data-dot-title") +
'">'
);
},
});