Carousel

<.carousel id="my-carousel">
  <:item>
    <div class="flex aspect-video items-center justify-center rounded-lg bg-muted">
      <span>Slide 1</span>
    </div>
  </:item>
  <:item>
    <div class="...">Slide 2</div>
  </:item>
  <:item>
    <div class="...">Slide 3</div>
  </:item>
</.carousel>

<.carousel id="image-carousel">
  <:item>
    <img src="/images/slide1.jpg" alt="Slide 1" class="w-full rounded-lg object-cover" />
  </:item>
  <:item>
    <img src="/images/slide2.jpg" alt="Slide 2" class="..." />
  </:item>
</.carousel>

<.carousel id="loop-carousel" loop>
  <:item>First</:item>
  <:item>Second</:item>
  <:item>Third</:item>
</.carousel>

<.carousel id="minimal" show_arrows={false}>
  <:item>Slide 1</:item>
  <:item>Slide 2</:item>
</.carousel>

<.carousel id="sized" width="300px" height="200px">
  <:item>Content</:item>
</.carousel>

<.carousel id="gap-carousel" gap="1rem">
  <:item>Item 1</:item>
  <:item>Item 2</:item>
  <:item>Item 3</:item>
</.carousel>