How to use v-carousel with multiple images per slide to create a product thumbnail and slider

I cannot seem to find an easy way to do this. I am trying to create a product image/slider in vuetify. The closest example of what I am trying to achieve is shown in this link:

https://flexy-vue3-main-admin.vercel.app/ecommerce/product/detail/1

I am struggling to figure out how to position multiple images in the slider and move them around into the the main image being in the center of the slider below. My first thought was to create a max slide count and use that to help predict the index of the image to show in the main screen. However, how this all comes together is not clicking for me. Its almost like in the example above there is a endless loop so that is confusing how to even implement. My code is as follows:

<template>
    <div>
        <v-row>
            <v-col class="ma-10">
                <v-row>
                    <v-carousel v-model="mainImgModel" hide-delimiters :show-arrows="false" class="rounded-lg ma-5">
                        <v-carousel-item v-for="(item,index) in data" :key="index"
                            :src="item['src']"
                            aspect-ratio = "1" cover>
                        </v-carousel-item>
                    </v-carousel>
                </v-row>
                <v-row>
                    <v-carousel v-model="thumbnailModel" hide-delimiters :show-arrows="false" class="ma-5">
                        <v-carousel-item v-for="(slide, index1) in numberOfSlides">
                            <v-row>
                                <v-col v-for="(item ,index2) in maxThumbnails">
                                    <v-img class="rounded-lg" aspect-ratio = "16/9" cover :src="data[index2+index1*maxThumbnails]['src']" @click="thumbnailAction((index2+index1*maxThumbnails))"></v-img>
                                </v-col>
                            </v-row>
                        </v-carousel-item>
                    </v-carousel>
                </v-row>
            </v-col>
            <v-col>
            
            </v-col>
        </v-row>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'

    const mainImgModel = ref<Number>(0);
    const thumbnailModel = ref<Number>(0);

    const maxThumbnails = 5;
    const data = [{src : "https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
    {src : "https://cdn.vuetifyjs.com/images/parallax/material.jpg"},
    {src : "https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
    {src : "https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
    {src : "https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
    {src : "https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
    {src : "https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
    {src : "https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
    {src : "https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
    {src : "https://cdn.vuetifyjs.com/images/cards/docks.jpg"}]
    const numberOfSlides = Math.floor(data.length/maxThumbnails);

    const thumbnailAction = (index : Number) => {
        //unsure what to do wih this info
        mainImgModel.value = index
    }
</script>