الحدث

    <.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

  

    <.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);
});