Search code examples
javascriptvue.jsnuxt.jscarouseldaisyui

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

I have created a carousel for product images which are 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.

Thank 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>

daisyui carousel

Solution

  • By installing the project and double-checking, I can confirm that DaisyUI is not using any VueJS part for its components. Meaning that their components do not emit any component events. Makes sense, because they only have TailwindCSS as their dependency.

    Inspecting the element itself regarding vanilla JS listeners, there are only mouseover'ish events + scroll one once the carousel is moving.

    You could hence try to find another UI library that provides you such a Vue event to react to or implement your own approach by listening to those vanilla events yourself thanks to VueUse but then it's basically doing it from scratch.