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>
Attribute Type Documentation Default Value
auto_rotation :boolean false
carousel_roledescription :string Sets the `aria-roledescription` attribute to describe the region as a carousel. This value should be translated to the language in which the rest of the page is displayed. "carousel"
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
Required id * :string
label :string A accessibility label for the carousel. Set as `aria-label` attribute. You should ensure that either the `label` or the `labelledby` attribute is set.
labelledby :string The DOM ID of an element that labels this carousel. Example: ```html <h3 id="dog-carousel-label">Our Dogs</h3> <.carousel labelledby="dog-carousel-label"></.carousel> ``` You should ensure that either the `label` or the `labelledby` attribute is set.
pagination :boolean false
pagination_label :string "Slides"
pagination_slide_label :any 1-arity function that takes the slide number as an argument and returns the aria label for the slide as used in the pagination buttons. &Doggo.slide_label/1
rest :global Any additional HTML attributes.
slide_roledescription :string Sets the `aria-roledescription` attribute to describe a slide. This value should be translated to the language in which the rest of the page is displayed. "slide"
Required inner_block * :slot Place the `carousel_item/1` component here.
Required item * :slot 
<: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>
next :slot 
<: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>
previous :slot 
<: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>