How to get current active image index of daisyui carousel with Nuxtjs

I have created a carousel for product images which using the daisyui carousel component.
I want to add indicators to this carousel, so that when a user swipe right or left, the active indicator will change accordingly.

I found that daisyui carousel uses anchor links so the browser will snap vertically to the image when user click buttons. Please advise me how to get the index of active image for styling the active indicator.

I have attached my code and my carousel ui rendered below.

Thanks you very much.

<div class="relative mx-[-1rem] my-2">
            <div class="w-full carousel">
                <div v-for="(item, index) in product.Images" :id="'img' + index"
                    class="carousel-item w-full">
                    <NuxtImg :src="item" class="w-full" :alt="'Tailwind CSS Carousel component ' + index" />
                </div>
            </div>

            <div class="absolute bottom-[1%] flex justify-center w-full py-2 gap-1">
                <a v-for="(item, index) in product.Images" :href="'#img' + index" 
                    class="btn btn-xs" :class="[ indicatorSelected == index ? 'text-red-600' : '' ]"
                    @click="indicatorSelected = index">
                    {{ index }}
                </a>
            </div>
        </div>