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

[barthamark]

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

• Slick version: 1.8.1