shadcn-vue/apps/www/src/lib/registry/default/example/CarouselDemo.vue
Sadegh Barati c33acba4ff
fix: prevent page zoom while tapping carousel buttons (#274)
* fix: prevent page zoom while tapping carousel buttons

choose shadcn-ui icons and sizes for buttons

* docs: fix carousel page responsive issues and ordering docs as shadcn-ui
2024-01-15 18:55:22 +03:30

23 lines
744 B
Vue

<script setup lang="ts">
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
import { Card, CardContent } from '@/lib/registry/default/ui/card'
</script>
<template>
<Carousel class="relative w-full max-w-xs">
<CarouselContent>
<CarouselItem v-for="(_, index) in 5" :key="index">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</template>