Reference multiple instances from controller

1

I’ve been using stimulus-carousel from stimulus-components and i’ve been struggling to work out how to achieve the swiper thumbs navigation like here:

Thumbs

I need to render two carousels, and reference one from the other, like this:

<script>
      var swiper = new Swiper(".mySwiper", {
        spaceBetween: 10,
        slidesPerView: 4,
        freeMode: true,
        watchSlidesProgress: true,
      });
      var swiper2 = new Swiper(".mySwiper2", {
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        thumbs: {
          swiper: swiper,
        },
      });
    </script>

Any help would be appreciated.

Thanks

2

I didn’t actually understood the code snippet (since it’s clearly plain javascript, not stimulus etc), but from what I could understand you want to communicate between sibling instances of a component.

Safest bet might be a parent component, connected to a parent DOM element of the two carousel nodes to bridge that communication.

3

Ohh I see now, one is inside the other recursively. I would implement a Stimulus component that can have a child target myself. You aren’t really gaining that much from the stimulus-components anyway.
It’s just a simple wrapper: