Vertical carousel orientation

<script setup lang="ts">
import { Card } from "@/components/ui/card"
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"

const PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs="
const slides = [0, 1, 2, 3, 4]
</script>

<template>
  <div class="flex w-full items-center justify-center p-6">
    <Carousel :opts="{ align: 'start', startIndex: 1, duration: 0 }" orientation="vertical" class="w-full max-w-xs">
      <CarouselContent class="-mt-1 h-[325px]">
        <CarouselItem v-for="index in slides" :key="index" class="basis-1/2 pt-1">
          <div class="p-1">
            <Card class="relative h-[145px] overflow-hidden border-0 p-0">
              <img :src="PIXEL" :alt="`Slide ${index + 1}`" width="600" height="300" class="h-full w-full object-cover" />
            </Card>
          </div>
        </CarouselItem>
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  </div>
</template>