Nested containers?

[csteinert]

Our implementation of Splide involves figure and figcaption elements within the slides, such as the following:

...
<li class="splide__slide">
  <figure>
    <div class="splide__slide__container"><img src="path/to/image" /></div>
    <figcaption>Caption text is here.</figcaption>
  </figure>
</li>
...

We run into issues when we try to replace the image with a video using the video extension. It seems that container elements are only detected when they are direct descendants of the slide element (ie. not nested). The result is that the video overlays the entire slide element instead of the container element. Example: https://jsfiddle.net/csteinert/3pafrt7e/1/

Is there a known workaround for this that I'm missing (aside from reworking the HTML)?

[NaotoshiFujita]

No, currently the container must be a child of each slide.
To achieve what you desire, you need to modify this line:
https://github.com/Splidejs/splide/blob/master/src/js/components/Slides/Slide.ts#L96

Or maybe you can do this (not ideal though):

<li class="splide__slide">
  <figure class="splide__slide__container">
    <img src="path/to/image" />
    <figcaption>Caption text is here.</figcaption>
  </figure>
</li>

But you need to offset the figcaption by absolute position.

[csteinert]

Thank you for the reply. I just wanted to make sure I wasn't missing anything.

I appreciate all your hard work on this project, SplideJS is a pleasure to work with!