Doggo Storybook 0.9.0

Carousel

Renders a carousel for presenting a sequence of items, such as images or text.

Read more Read less

Usage

<.carousel label="Our Dogs">
  <:previous label="Previous Slide">
    <Heroicons.chevron_left />
  </:previous>
  <:next label="Next Slide">
    <Heroicons.chevron_right />
  </:next>
  <:item label="1 of 3">
    <.image
      src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
      alt="A dog wearing a colorful poncho walks down a fashion show runway."
      ratio={{16, 9}}
    />
  </:item>
  <:item label="2 of 3">
    <.image
      src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
      alt="A dog dressed in a sumptuous, baroque-style costume, complete with jewels and intricate embroidery, parades on an ornate runway at a luxurious fashion show, embodying opulence and grandeur."
      ratio={{16, 9}}
    />
  </:item>
  <:item label="3 of 3">
    <.image
      src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
      alt="A dog adorned in a lavish, flamboyant outfit, including a large feathered hat and elaborate jewelry, struts confidently down a luxurious fashion show runway, surrounded by bright lights and an enthusiastic audience."
      ratio={{16, 9}}
    />
  </:item>
</.carousel>
Default Open in playground 
<.carousel id="carousel-single-default" label="Our Dogs" pagination>
  <:previous label="Previous Slide">
    <.icon><svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="lucide lucide-chevron-left"
  >
    <path d="m15 18-6-6 6-6" />
  </svg>
  </.icon>
  </:previous>
  <:next label="Next Slide">
    <.icon><svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="lucide lucide-chevron-right"
  >
    <path d="m9 18 6-6-6-6" />
  </svg>
  </.icon>
  </:next>
  <:item label="1 of 4">
    <.image
      src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
      alt="A dog wearing a colorful poncho walks down a fashion show runway."
    />
  </:item>
  <:item label="2 of 4">
    <.image
      src="https://github.com/woylie/doggo/blob/main/assets/dog_lavish.jpg?raw=true"
      alt="A dog elegantly attired in a lavish baroque costume, adorned with vibrant Pride colors and embellishments, walks down a runway that blends historical opulence with modern LGBTQ+ Pride symbolism, showcasing a unique fusion of luxury and celebratory expression."
    />
  </:item>
  <:item label="3 of 4">
    <.image
      src="https://github.com/woylie/doggo/blob/main/assets/dog_baroque.jpg?raw=true"
      alt="A dog dressed in a sumptuous, baroque-style costume, complete with jewels and intricate embroidery, parades on an ornate runway at a luxurious fashion show, embodying opulence and grandeur."
    />
  </:item>
  <:item label="4 of 4">
    <.image
      src="https://github.com/woylie/doggo/blob/main/assets/dog_flamboyant.jpg?raw=true"
      alt="A dog adorned in a lavish, flamboyant outfit, including a large feathered hat and elaborate jewelry, struts confidently down a luxurious fashion show runway, surrounded by bright lights and an enthusiastic audience."
    />
  </:item>
</.carousel>