How to use the sync method?

[rudolfbruder]

Hi,

I tried my best to follow the docs but i am unable to get this package to work properly.

I followed the thumbnails part but how do i manage to sync them? I copy pasted the code and it works in some way but what html is needed for the "main-slider" ? Where do i need to put it?

Here is my code:

<div id="main-slider" class="splide">
    <div class="splide__track">
        <ul class="splide__list">

        </ul>
    </div>
</div>
<div id="thumbnail-slider" class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            @foreach ($coloredProduct->topFivePhotos as $photo)
                <li class="splide__slide">
                    <img src="{{ url('/storage/' . $photo->path) }}">
                </li>
            @endforeach
            @foreach ($coloredProduct->topFivePhotos as $photo)
                <li class="splide__slide">
                    <img src="{{ url('/storage/' . $photo->path) }}">
                </li>
            @endforeach
        </ul>
    </div>
</div>

And here is my .js file:

import Splide from "@splidejs/splide";
var thumbnails = new Splide("#thumbnail-slider", {
  fixedWidth: 100,
  fixedHeight: 60,
  gap: 10,
  rewind: true,
  pagination: false,
  cover: true,
  focus: "center",
  breakpoints: {
    600: {
      fixedWidth: 60,
      fixedHeight: 44,
    },
  },
});

var main = new Splide("#main-slider", {
  type: "fade",
  rewind: true,
  pagination: false,
  arrows: false,
});
main.sync(thumbnails);
main.mount();
thumbnails.mount();

Here is my outcome:

The arrows work but the main image is not popping. I am sure it's some dumb mistake from my side.

Any help is highly appreciated!

[rudolfbruder]

I think I get it now, i need the same content in the main slider as well. I have also imported css and of course it looks better