Doggo Storybook 0.10.4-34-g3a480e9

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

 Read more Read less
"carousel"
class :any

Any additional classes to be added.

 Read more Read less
[]

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.

 Read more Read less

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.

 Read more Read less

Example:

<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

 Read more Read less
&Doggo.slide_label/1

aria label for the slide as used in the pagination buttons.
rest :global

Any additional HTML attributes.
slide_roledescription :string

Sets the aria-roledescription attribute to describe a slide. This value

 Read more Read less
"slide"

should be translated to the language in which the rest of the page is displayed.
Required inner_block * :slot

Place the carousel_item/1 component here.
Required item * :slot
Show slot attributes Hide slot attributes
label :string

Aria label for the slide, e.g. “1 of 5”.

 
<: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
Show slot attributes Hide slot attributes
label :string 
<: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
Show slot attributes Hide slot attributes
label :string 
<: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>