kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.33k stars 5.88k forks source link

Empty id attributes are added to the slick item elements causing HTML validation error (valid-id) #4296

Open barthamark opened 1 month ago

barthamark commented 1 month ago

When the Slick carousel is rendered the items have empty id elements. You can reproduce it with the jsfiddle you've provided in the issue template. It's an issue where HTML validation is needed to pass, see: https://html-validate.org/rules/valid-id.html#:~:text=Strictly%20the%20HTML5%20standard%20defines,%22%20becomes%20%23%5C%5C31%2023%20).

http://jsfiddle.net/simeydotme/fmo50w7n/

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

Steps to reproduce the problem

Use Slick carousel as it's described in the documentation, nothing extra is needed.

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

What is the expected behaviour?

Don't have empty id attributes, just simply remove the attribute if not needed.

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

What is observed behaviour?

Elements have empty id attributes.

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

Workaround

I have the following workaround:

        $carousel.on("init", () => {
            $carousel.find("[id]").filter((_, element) => element.id === "").removeAttr("id");
        });

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

More Details