Nuxt•5mo ago

Issue with Nuxt3 UI Carousel.

For some reason when I try the full width example shown on the wiki page it does not go Full Width at all. In fact the flex display tries to fit everything on the full view width. To make things worse pagination also does not work because of this. https://ui.nuxt.com/components/carousel Expected: Every image should be an seperate slide

Nuxt UI

Carousel - Nuxt UI

Display images or content in a scrollable area.

1 Reply

ILLuMiNaTe•5mo ago

<script setup lang="ts">
const items = [
  'https://picsum.photos/600/800?random=1',
  'https://picsum.photos/600/800?random=2',
  'https://picsum.photos/600/800?random=3',
  'https://picsum.photos/600/800?random=4',
  'https://picsum.photos/600/800?random=5',
  'https://picsum.photos/600/800?random=6'
]
</script>

<template>
  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="w-64 mx-auto rounded-lg overflow-hidden">
    <img :src="item" class="w-full" draggable="false">
  </UCarousel>
</template>

<script setup lang="ts">
const items = [
  'https://picsum.photos/600/800?random=1',
  'https://picsum.photos/600/800?random=2',
  'https://picsum.photos/600/800?random=3',
  'https://picsum.photos/600/800?random=4',
  'https://picsum.photos/600/800?random=5',
  'https://picsum.photos/600/800?random=6'
]
</script>

<template>
  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="w-64 mx-auto rounded-lg overflow-hidden">
    <img :src="item" class="w-full" draggable="false">
  </UCarousel>
</template>

Gaming

Programming

Issue with Nuxt3 UI Carousel.