mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
34 lines
1011 B
Vue
34 lines
1011 B
Vue
<script setup lang="ts">
|
|
const items = [{
|
|
name: 'Sébastien Chopin',
|
|
to: 'https://github.com/Atinux',
|
|
avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/atinux' }
|
|
}, {
|
|
name: 'Pooya Parsa',
|
|
to: 'https://github.com/pi0',
|
|
avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/pi0' }
|
|
}, {
|
|
name: 'Daniel Roe',
|
|
to: 'https://github.com/danielroe',
|
|
avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/danielroe' }
|
|
}, {
|
|
name: 'Anthony Fu',
|
|
to: 'https://github.com/antfu',
|
|
avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/antfu' }
|
|
}]
|
|
</script>
|
|
|
|
<template>
|
|
<UCarousel :items="items" :ui="{ item: 'w-full' }">
|
|
<template #default="{ item, index }">
|
|
<div class="text-center mx-auto">
|
|
<img :src="item.avatar.src" :alt="item.name" class="rounded-full w-48 h-48 mb-2" draggable="false">
|
|
|
|
<p class="font-semibold">
|
|
{{ index + 1 }}. {{ item.name }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</UCarousel>
|
|
</template>
|