Ignore <template> slide elements

I’m dynamically generating a list of slides (using AlpineJS x-for) before calling EmblaCarousel, however it seems like the <template> element is being picked up as a slide. My HTML structure looks like this:

<div class="embla">
  <ul class="embla__container">
    <template x-for="item in list"><li>...</li></template>

    <!-- dynamically generated -->
    <li class="embla__slide">...</li>
    <li class="embla__slide">...</li>
    <li class="embla__slide">...</li>
    <li class="embla__slide">...</li>
    <!-- end dynamically generated -->
  </ul>
</div>

I’m now manually creating this list for the time-being, but is there any way to ignore the <template> when creating an instance of Embla?

[davidjerleke]

@hannahwoodward I’m going to mark this issue as resolved because this solution makes it possible to achieve what you want.

Please let me know if you don’t agree.

[davidjerleke]

Hi @hannahwoodward,

FWIW, decades later, I want to let you know that it’s possible to provide your own slides from v6 and up.

const embla = EmblaCarousel({ rootNode, containerNode, slideNodes }, options)

👉 Please note:

• rootNode is mandatory when passing an object with element nodes instead of a single element node.
• if containerNode is omitted, Embla will pick the first immediate child inside the rootNode.
• slideNodes has to be an array and not a nodeList.
• It’s your responsibility to make sure that any elements inside the container that aren’t slides don’t take up any space.

Best David