Clones not rendered properly with Alpine js x-for

[pagesailor]

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.1.3

Description

If used with Alpine.js x-for directive, the clones are not rendered properly. The x-for loop elements are undefined for the clones.

Example:

<template x-if="instagramPosts && instagramPosts.length">
    <div class="splide" data-splide-main>
        <div class="splide__track">
            <div class="splide__list">
                <template x-for="post in instagramPosts" :key="post.id">
                    <div class="splide__slide relative">
                        <a :href="post.permalink" target="_blank">
                            <img :src="post.media_url" :alt="post.caption" />
                        </a>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

post is undefined for the clones, so the images are not rendered.

Reproduction Link

No response

Steps to Reproduce

1. initialize Splide where the slides are Alpine.js x-for directive elements
2. set the slider type to loop, and don't disable any clones.

Expected Behaviour

Clones should work with the Alpine.js x-for directive.

[JonKaric]

@pagesailor Could you post a reproduction link please on sites like jsFiddle or Codepen), helps diagnose the issue

[MaxNvk]

I use Splide with Vuejs project. When I updated my dependencies to:

"@splidejs/splide": "^4.1.4", "@splidejs/splide-extension-auto-scroll": "^0.5.3",

this update bug was caused. But when I made a rollback to

"@splidejs/splide": "4.0.7", "@splidejs/splide-extension-auto-scroll": "0.4.2",

It works great for me again.