I’m working on a Nuxt 3 project and trying to implement a SwiperJS thumbs gallery – https://swiperjs.com/demos#thumbs-gallery. I want the thumbnails to synchronize with the main slider so that selecting a thumbnail updates the main image, and vice versa. Right now I can only swipe them separately. Additionally, I want to be able to click on a thumbnail to make the corresponding image appear in the main slider.

<template>
  <div class="w-full">
    <Swiper
      class="w-full"
      :modules="[SwiperController]"
      :controller="{ control: thumbsswiper }"
      @swiper="setTopSwiper"
    >
      <SwiperSlide class="max-w-[1246px]" v-for="(img, i) in images" :key="i">
        <img
          class="h-[480px] w-full object-cover"
          crossorigin="anonymous"
          :src="`https://picsum.photos/id/${img}/1246/480`"
        />
      </SwiperSlide>
    </Swiper>
    <Swiper
      class="mt-2 w-full"
      :modules="[SwiperController]"
      :slides-per-view="7"
      :controller="{ control: topswiper }"
      @swiper="setThumbsSwiper"
      :slideToClickedSlide="true"
      :freeMode="true"
    >
      <SwiperSlide class="mr-2 first:mr-0" v-for="(img, i) in images" :key="i">
        <img
          crossorigin="anonymous"
          :src="`https://picsum.photos/id/${img}/100/100`"
        />
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<script setup>
import { ref } from 'vue';

let topswiper = null,
  thumbsswiper = null,
  images = ref(['101', '102', '103', '104', '105', '106', '107', '108', '109']);

let setTopSwiper = (swiper) => {
  topswiper = swiper;
};

let setThumbsSwiper = (swiper) => {
  thumbsswiper = swiper;
};
</script>