Carousel with autoplay plugin

<!--
  Оригинал (c-carousel-5.tsx) подключает плагин embla-carousel-autoplay.
  Категория намеренно отключает автопрокрутку для детерминированного
  скриншота (docs/PORTING.md, задача Фазы 2 по carousel) — плагин не
  подключён ни в порте, ни в React-эталоне, зафиксирован только
  startIndex.
-->
<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>
      <CarouselItem v-for="index in slides" :key="index">
        <div class="p-1">
          <Card class="relative aspect-square overflow-hidden border-0 p-0">
            <img :src="PIXEL" :alt="`Slide ${index + 1}`" width="800" height="800" class="h-full w-full object-cover" />
          </Card>
        </div>
      </CarouselItem>
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>
</template>