<.carousel id="carousel-single-default" active_item={2}>
  <:carousel_item>
    <div class="flex items-center justify-center h-40 w-2xs bg-brand-subtle text-brand">
      Item 1
    </div>
  </:carousel_item>
  <:carousel_item>
    <div class="flex items-center justify-center h-40 w-2xs bg-brand-subtle text-brand">
      Item 2
    </div>
  </:carousel_item>
  <:carousel_item>
    <div class="flex items-center justify-center h-40 w-2xs bg-brand-subtle text-brand">
      Item 3
    </div>
  </:carousel_item>
  <:carousel_item>
    <div class="flex items-center justify-center h-40 w-2xs bg-brand-subtle text-brand">
      Item 4
    </div>
  </:carousel_item>
  <:carousel_item>
    <div class="flex items-center justify-center h-40 w-2xs bg-brand-subtle text-brand">
      Item 5
    </div>
  </:carousel_item>
</.carousel>

<.carousel id="carousel-single-has-controls" active_item={2} has_controls>
  <:carousel_item>
    <div class="flex items-center justify-center h-40 w-2xs bg-brand-subtle text-brand">
      Item 1
    </div>
  </:carousel_item>
  <:carousel_item>
    <div class="flex items-center justify-center h-40 w-2xs bg-brand-subtle text-brand">
      Item 2
    </div>
  </:carousel_item>
  <:carousel_item>
    <div class="flex items-center justify-center h-40 w-2xs bg-brand-subtle text-brand">
      Item 3
    </div>
  </:carousel_item>
  <:carousel_item>
    <div class="flex items-center justify-center h-40 w-2xs bg-brand-subtle text-brand">
      Item 4
    </div>
  </:carousel_item>
  <:carousel_item>
    <div class="flex items-center justify-center h-40 w-2xs bg-brand-subtle text-brand">
      Item 5
    </div>
  </:carousel_item>
</.carousel>