How to reliably sync multiple sliders at the same time?

[yellow1912]

By multiple, I mean more than 2. A use case scenario can be:

1. A slider navigation/thumbnails in loop mode
2. A main, single slide slider (to display what is selected in the thumbnail)
3. A slider in a modal in loop mode to display a bigger version of the gallery

Right now I'm not using sync feature, but I use event and manually "go" to the index. I listen to the navigation slider events to update the main slider accordingly. When the user clicks on any slide on the main slider I open the modal slider and navigate to the matching slide.

The problem I have is with the index. It seems like the index of the slides is different depending on the mode of the slider, so I cannot assume that slide index 1 on the main slider also matches slide index 1 on the modal slider.

Is there any way to do this?

[NaotoshiFujita]

I the loop slider, clones have unique indices. If you want to get the normalized index from a Slide component, you can do like this:

const index = Slide.isClone ? Slide.slideIndex : Slide.index;

https://splidejs.com/components/slide/