UCarousel (embla carousel) how to ensure width conforms to parents div?
I'm having issues with my Ucarousel not conforming its width to its parent div how can I solve this to ensure it does it properly? this is my component with the carousel is there something here I'm doing wrong?
<template>
<div
class="flex flex-col gap-5 w-full pb-16 overflow-x-hidden mx-auto max-w-[var(--ui-container)]"
>
<!-- Heading -->
<div class="flex justify-between items-baseline w-full">
<!-- Category title -->
<p class="font-semibold text-xl">Popular Products</p>
<!-- Link to category page with dynamic count -->
<NuxtLink
to="/store"
class="flex items-center gap-1 text-muted hover:text-default font-semibold text-sm transition-colors duration-200 group"
>
<span>See all ({{ totalCount }})</span>
<UIcon
name="i-heroicons-chevron-right"
size="12"
class="transform transition-transform duration-200 ease-out group-hover:translate-x-0.5"
/>
</NuxtLink>
</div>
<!-- Loading state -->
<div v-if="pending" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div v-for="i in 4" :key="i" class="animate-pulse">
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg h-64"></div>
</div>
</div>
<!-- Products carousel with shadows -->
<div v-else-if="products.length > 0" class="relative">
<UCarousel
v-slot="{ item }"
loop
arrows
dots
:autoplay="{ delay: 2500 }"
:items="products"
:ui="{
container: 'transition-[height]',
viewport: 'overflow-visible',
item: 'basis-4/5 sm:basis-1/2 md:basis-3/7 lg:basis-1/4',
controls: 'absolute -bottom-8 inset-x-0 md:inset-x-12',
dots: '-top-7 md:inset-x-0 inset-x-12',
dot: 'w-6 h-1',
}"
class="w-full"
>
<StoreProductCard :product="item" />
</UCarousel>
</div>
</div>
</template><template>
<div
class="flex flex-col gap-5 w-full pb-16 overflow-x-hidden mx-auto max-w-[var(--ui-container)]"
>
<!-- Heading -->
<div class="flex justify-between items-baseline w-full">
<!-- Category title -->
<p class="font-semibold text-xl">Popular Products</p>
<!-- Link to category page with dynamic count -->
<NuxtLink
to="/store"
class="flex items-center gap-1 text-muted hover:text-default font-semibold text-sm transition-colors duration-200 group"
>
<span>See all ({{ totalCount }})</span>
<UIcon
name="i-heroicons-chevron-right"
size="12"
class="transform transition-transform duration-200 ease-out group-hover:translate-x-0.5"
/>
</NuxtLink>
</div>
<!-- Loading state -->
<div v-if="pending" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div v-for="i in 4" :key="i" class="animate-pulse">
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg h-64"></div>
</div>
</div>
<!-- Products carousel with shadows -->
<div v-else-if="products.length > 0" class="relative">
<UCarousel
v-slot="{ item }"
loop
arrows
dots
:autoplay="{ delay: 2500 }"
:items="products"
:ui="{
container: 'transition-[height]',
viewport: 'overflow-visible',
item: 'basis-4/5 sm:basis-1/2 md:basis-3/7 lg:basis-1/4',
controls: 'absolute -bottom-8 inset-x-0 md:inset-x-12',
dots: '-top-7 md:inset-x-0 inset-x-12',
dot: 'w-6 h-1',
}"
class="w-full"
>
<StoreProductCard :product="item" />
</UCarousel>
</div>
</div>
</template>
