Doggo Storybook 0.14.6-5-g977fe41
- 1.1.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>

This component defines colocated Phoenix LiveView hook with the name Doggo.Components.Carousel. (note the trailing .).

import { hooks as doggoHooks } from "phoenix-colocated/doggo";

const Hooks = {
  'Doggo.Components.Carousel.': doggoHooks['Doggo.Components.Carousel.']
};

const liveSocket = new LiveSocket("/live", Socket, {
  // ...
  hooks: Hooks,
});