get splide instance from element ?

[flihub]

how to get Instance from element ?

we can get it like this in other sliders:
const flkty = Flickity.data('.main-carousel');
const swiper = document.querySelector('.swiper').swiper;

[NaotoshiFujita]

If it is really necessary, you can do this:

const splide = new Splide( '#splide' ).mount();
splide.root.splide = splide; // Assigns "splide" property to the element

But I would never do that since it's messy and risky.

[flihub]

hi all options come from html with data-splide and want to sync splides from html with data-sync

https://splidejs.com/guides/options/#by-data-attribute
https://splidejs.com/tutorials/thumbnail-slider/

document.querySelectorAll(".splide").forEach((element) => {
   element.splide // want to get like this splide instance 
});

currenty solve with for data-sync from html :

<div id="project-gallery" class="splide">....</div>
<div id="project-thumbnail" class="splide" data-sync="project-gallery">....</div>

import Splide from "@splidejs/splide";

let splides = [];

document.querySelectorAll(".splide").forEach((element) => {
    splides.push(new Splide(element));
});

splides.forEach((element) => {
    let root = element.root;
    let sync = root.dataset.sync;
    let syncTo = splides.filter((item) => {
        return item.root.id == sync;
    });

    if (sync && syncTo[0]) {
        syncTo[0].sync(element);
    }
});

splides.forEach((element) => {
    element.mount();
});

[NaotoshiFujita]

I would do like this:

document.querySelectorAll( '[data-sync]' ).forEach( elm => {
  if ( elm.dataset.sync ) {
    const thumbs = new Splide( elm );
    const main   = new Splide( `#${ elm.dataset.sync }` );
    main.sync( thumbs ).mount();
    thumbs.mount();
  }
} );

Getting an instance from an element is a bad idea, since there are better solutions in most cases.