Hi @velvet ember. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Need help from actual human beings (!!!)
lilac badgerBOT
You can overlay the arrows on top of the carousel content by customizing the UCarousel slots/classes for prev/next. Nuxt UI exposes “prev” and “next” slots with default absolute positioning in its theme, so you can override them to sit centered vertically on the left/right, above the slides. [Theme]
Two key points:
- Ensure the carousel root is relatively positioned so absolute arrows anchor correctly. The default slot class sets root as relative. [Theme]
- Override prev/next classes via the ui prop to place them over the slides.
Example:
<script setup lang="ts">
const items = [
'/500x800.png',
'/500x800.png',
'/500x800.png',
'/500x800.png',
'/500x800.png',
'/500x800.png',
'/500x800.png'
]
</script>
<template>
<UCarousel
v-slot="{ item }"
arrows
:items="items"
:ui="{
// keep items as needed
item: 'basis-1/5',
// overlay arrows centered on the sides
prev: 'absolute start-4 sm:start-6 top-1/2 -translate-y-1/2 z-10',
next: 'absolute end-4 sm:end-6 top-1/2 -translate-y-1/2 z-10',
// optionally ensure arrows wrapper is not offset
arrows: ''
}"
class="w-full"
>
<NuxtImg :src="item" width="300" height="300" class="rounded-lg" />
</UCarousel>
</template>
If you also want custom icons or different button styles, you can:
- Change icons with prev-icon/next-icon. [Prev/Next Icons]
- Customize the buttons via the prev and next props (e.g., variant, color, size), or wire onClick handlers. [Usage]