shadcn-vue/apps/www/registry/default/example/CarouselOrientation.vue
2024-11-21 11:52:31 +08:00

29 lines
870 B
Vue

<script setup lang="ts">
import { Card, CardContent } from '@/lib/registry/default/ui/card'
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
</script>
<template>
<Carousel
orientation="vertical"
class="relative w-full max-w-xsw-full max-w-xs"
:opts="{
align: 'start',
}"
>
<CarouselContent class="-mt-1 h-[200px]">
<CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
<div class="p-1">
<Card>
<CardContent class="flex items-center justify-center p-6">
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</template>