Carousel with custom spacing

<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>
  <Carousel :opts="{ startIndex: 1, duration: 0 }" class="w-full max-w-xs">
    <CarouselContent class="-ml-1">
      <CarouselItem v-for="index in slides" :key="index" class="basis-1/2 pl-1">
        <div class="p-1">
          <Card class="relative aspect-square overflow-hidden border-0 p-0">
            <img :src="PIXEL" :alt="`Slide ${index + 1}`" width="600" height="600" class="h-full w-full object-cover" />
          </Card>
        </div>
      </CarouselItem>
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>
</template>