Usage
The Carousel component provides a flexible way to display content in a scrollable carousel format. It uses Embla Carousel under the hood.
<template>
<UCarousel
:items="items"
arrows
dots
>
<template #default="{ item }">
<img :src="item.image" :alt="item.title" />
</template>
</UCarousel>
</template>
<script setup lang="ts">
const items = [
{ image: '/img/slide1.jpg', title: 'Slide 1' },
{ image: '/img/slide2.jpg', title: 'Slide 2' },
{ image: '/img/slide3.jpg', title: 'Slide 3' }
]
</script>
Orientation
Control the carousel direction with the orientation prop.
<UCarousel
:items="items"
orientation="vertical"
arrows
>
<template #default="{ item }">
<div>{{ item.title }}</div>
</template>
</UCarousel>
Navigation
Arrows
Enable navigation arrows with the arrows prop.
<UCarousel :items="items" arrows>
<template #default="{ item }">
<div>{{ item.content }}</div>
</template>
</UCarousel>
<UCarousel
:items="items"
arrows
:prev="{ color: 'primary', variant: 'solid' }"
:next="{ color: 'primary', variant: 'solid' }"
prev-icon="i-heroicons-chevron-left"
next-icon="i-heroicons-chevron-right"
>
<template #default="{ item }">
<div>{{ item.content }}</div>
</template>
</UCarousel>
Dots
Enable dot indicators with the dots prop.
<UCarousel :items="items" dots>
<template #default="{ item }">
<div>{{ item.content }}</div>
</template>
</UCarousel>
Plugins
Embla Carousel supports various plugins that can be enabled through props.
Autoplay
Enable autoplay to automatically cycle through slides.
<UCarousel :items="items" :autoplay="{ delay: 3000 }">
<template #default="{ item }">
<div>{{ item.content }}</div>
</template>
</UCarousel>
<UCarousel :items="items" :auto-scroll="{ speed: 1 }">
<template #default="{ item }">
<div>{{ item.content }}</div>
</template>
</UCarousel>
Fade
Enable fade transition between slides.
<UCarousel :items="items" fade>
<template #default="{ item }">
<div>{{ item.content }}</div>
</template>
</UCarousel>
Events
Listen to the select event to track when the selected slide changes.
<UCarousel :items="items" @select="onSelect">
<template #default="{ item }">
<div>{{ item.content }}</div>
</template>
</UCarousel>
<script setup lang="ts">
function onSelect(index: number) {
console.log('Selected slide:', index)
}
</script>
Props
The element or component this component should render as.
Array of items to display in the carousel.
orientation
'horizontal' | 'vertical'
default:"'horizontal'"
The orientation of the carousel.
Display prev and next buttons to scroll the carousel.
Display dots to scroll to a specific slide.
Configure the prev button when arrows are enabled.
prevIcon
string
default:"appConfig.ui.icons.arrowLeft"
The icon displayed in the prev button.
Configure the next button when arrows are enabled.
nextIcon
string
default:"appConfig.ui.icons.arrowRight"
The icon displayed in the next button.
Embla Options
align
'start' | 'center' | 'end'
default:"'center'"
Align slides within the viewport.
Number of slides to scroll at once.
Enable free dragging without scroll snapping.
containScroll
'trimSnaps' | 'keepSnaps' | false
default:"'trimSnaps'"
Contain scroll to viewport.
Plugins
autoplay
boolean | AutoplayOptionsType
default:"false"
autoScroll
boolean | AutoScrollOptionsType
default:"false"
autoHeight
boolean | AutoHeightOptionsType
default:"false"
classNames
boolean | ClassNamesOptionsType
default:"false"
fade
boolean | FadeOptionsType
default:"false"
wheelGestures
boolean | WheelGesturesPluginOptions
default:"false"
Custom class to apply to the root element.
Override default theme classes.
Slots
default
{ item: T, index: number }
Slot for rendering each carousel item.
Emits
select
(selectedIndex: number) => void
Emitted when the selected slide changes.
Expose
Reference to the Embla viewport element.
Reference to the Embla API instance.