Why do we clone the content of the slides?

[jamalsoueidan]

I'm using video service to embed video into the splide, I can only define the html content, and the javascript will replace the html with video.

Javascript initialize the video content by searching the dom for the html with the specfic id.

Since splide clone the content, suddenly I have 2 ids in the dom?? This make the videos not working!

Is there any way I can disable this behavior?

[jamalsoueidan]

// https://www.npmjs.com/package/react-player
const url = `https://getleda.wistia.com/medias/${source}`

<ReactPlayer
      className="storyPlayer__reactPlayer"
      height="100%"
      url={url}
      width="100%"
    />
   

This is very simple reactplayer that are used to handle all video platform, if you embed this into the slider, and you actually use the same example you did with the fullscreen, you will see it's failling when you go fullscreen, and back to normal mode, because of the clone elements.

I tried to delay the rendering of the slice, so splide actually clone fake content, but as soon as it refresh on random times, the whole splide is rerendered and break the player.

[jamalsoueidan]

I found a solution :)

[99bits]

Please kindly share your solution.

[NaotoshiFujita]

Why do we clone the content of the slides?

To loop a carousel. Think we're creating a loop carousel with 2 images, we need to fill on the left side with a clone like:

Also, Splide uses CSS transition to slide, which requires clones to shift backwards/forwards a carousel.

Well... was the Video extension useless?