Reference multiple instances from controller

[dp6ai]

Hi,

I've been struggling to work out how to achieve the swiper thumbs navigation like here:

Thumbs

How would i set up multiple carousels and pass the reference of one to the other with stimulus? 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>