Carousel

Event

Subscribe to page changes from LiveView or the client.

Hex doc

Phoenix

On Page Change (Server)

Time	Source	ID	Page	Snap
No event yet. Interact with the components to receive new events

    <.carousel
  items={[
  Corex.Image.new("/images/beach.jpg", alt: "Beach"),
  Corex.Image.new("/images/fall.jpg", alt: "Fall"),
  Corex.Image.new("/images/sand.jpg", alt: "Sand"),
  Corex.Image.new("/images/star.jpg", alt: "Star"),
  Corex.Image.new("/images/winter.jpg", alt: "Winter")
]
}
  class="carousel"
  on_page_change="carousel_page_changed"
>
  <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>
</.carousel>

    def handle_event("carousel_page_changed", %{"id" => id, "page" => page} = params, socket) do
  IO.inspect(params, label: "carousel_page_changed")
  {:noreply, socket}
end

On Page Change (Client)

Time	Source	ID	Page	Snap
No event yet. Interact with the components to receive new events

    <.carousel
  id="carousel-events-client"
  items={[
  Corex.Image.new("/images/beach.jpg", alt: "Beach"),
  Corex.Image.new("/images/fall.jpg", alt: "Fall"),
  Corex.Image.new("/images/sand.jpg", alt: "Sand"),
  Corex.Image.new("/images/star.jpg", alt: "Star"),
  Corex.Image.new("/images/winter.jpg", alt: "Winter")
]
}
  class="carousel"
  on_page_change_client="carousel-page-changed"
>
  <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>
</.carousel>

    const el = document.getElementById("carousel-events-client");
el?.addEventListener("carousel-page-changed", (event) => {
  const d = event.detail;
  const page =
    d && d.value && typeof d.value === "object" && "page" in d.value ? d.value.page : null;
  console.log(d?.id, page);
});

    const el = document.getElementById("carousel-events-client");
type PageDetail = { id: string; value: { page: number } };
el?.addEventListener("carousel-page-changed", (event: Event) => {
  const d = (event as CustomEvent<PageDetail>).detail;
  const page =
    d && d.value && typeof d.value === "object" && "page" in d.value ? d.value.page : null;
  console.log(d?.id, page);
});