Files
ui/docs/components/content/examples/CarouselExampleArrowsCenter.vue
Michał Hanusek f37b043138 feat(Carousel): new component (#927)
Co-authored-by: Michał Hanusek <m.hanusek@myfreak.pl>
Co-authored-by: Inesh Bose <dev@inesh.xyz>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-01-22 17:47:14 +01:00

36 lines
800 B
Vue

<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',
container: 'rounded-lg'
}"
:prev-button="{
color: 'gray',
icon: 'i-heroicons-arrow-left-20-solid',
class: '-left-12'
}"
:next-button="{
color: 'gray',
icon: 'i-heroicons-arrow-right-20-solid',
class: '-right-12'
}"
arrows
class="w-64 mx-auto"
>
<img :src="item" class="w-full">
</UCarousel>
</template>