Carousel · API

    <.action phx-click={Corex.Carousel.play("api-carousel-play-client")}>Play</.action>
<.action phx-click={Corex.Carousel.pause("api-carousel-play-client")}>Pause</.action>
<.action phx-click={Corex.Carousel.scroll_next("api-carousel-play-client")}>Next</.action>
<.action phx-click={Corex.Carousel.scroll_prev("api-carousel-play-client")}>Prev</.action>
<.action phx-click={Corex.Carousel.scroll_next("api-carousel-play-client", true)}>Next (instant)</.action>
<.action phx-click={Corex.Carousel.scroll_prev("api-carousel-play-client", true)}>Prev (instant)</.action>
<.carousel
  id="api-carousel-play-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")
]
}
  autoplay
  loop
  class="carousel"
>
  <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>
</.carousel>

  

    <.action
  phx-click={
    Phoenix.LiveView.JS.dispatch("corex:carousel:play",
      to: "#api-carousel-play-client-js",
      detail: %{},
      bubbles: false
    )
  }
>
  Play
</.action>
<.action
  phx-click={
    Phoenix.LiveView.JS.dispatch("corex:carousel:pause",
      to: "#api-carousel-play-client-js",
      detail: %{},
      bubbles: false
    )
  }
>
  Pause
</.action>
<.action
  phx-click={
    Phoenix.LiveView.JS.dispatch("corex:carousel:scroll-next",
      to: "#api-carousel-play-client-js",
      detail: %{},
      bubbles: false
    )
  }
>
  Next
</.action>
<.action
  phx-click={
    Phoenix.LiveView.JS.dispatch("corex:carousel:scroll-prev",
      to: "#api-carousel-play-client-js",
      detail: %{},
      bubbles: false
    )
  }
>
  Prev
</.action>
<.action
  phx-click={
    Phoenix.LiveView.JS.dispatch("corex:carousel:scroll-next",
      to: "#api-carousel-play-client-js",
      detail: %{instant: true},
      bubbles: false
    )
  }
>
  Next (instant)
</.action>
<.action
  phx-click={
    Phoenix.LiveView.JS.dispatch("corex:carousel:scroll-prev",
      to: "#api-carousel-play-client-js",
      detail: %{instant: true},
      bubbles: false
    )
  }
>
  Prev (instant)
</.action>
<.carousel
  id="api-carousel-play-client-js"
  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")
]
}
  autoplay
  loop
  class="carousel"
>
  <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>
</.carousel>

  

    const el = document.getElementById("api-carousel-play-client-js")
el?.dispatchEvent(new CustomEvent("corex:carousel:play", { bubbles: false, detail: {} }))
el?.dispatchEvent(new CustomEvent("corex:carousel:pause", { bubbles: false, detail: {} }))
el?.dispatchEvent(new CustomEvent("corex:carousel:scroll-next", { bubbles: false, detail: {} }))
el?.dispatchEvent(new CustomEvent("corex:carousel:scroll-prev", { bubbles: false, detail: {} }))
el?.dispatchEvent(
  new CustomEvent("corex:carousel:scroll-next", { bubbles: false, detail: { instant: true } })
)
el?.dispatchEvent(
  new CustomEvent("corex:carousel:scroll-prev", { bubbles: false, detail: { instant: true } })
)

  

    const el: HTMLElement | null = document.getElementById("api-carousel-play-client-js")
el?.dispatchEvent(new CustomEvent("corex:carousel:play", { bubbles: false, detail: {} }))
el?.dispatchEvent(new CustomEvent("corex:carousel:pause", { bubbles: false, detail: {} }))
el?.dispatchEvent(new CustomEvent("corex:carousel:scroll-next", { bubbles: false, detail: {} }))
el?.dispatchEvent(new CustomEvent("corex:carousel:scroll-prev", { bubbles: false, detail: {} }))
el?.dispatchEvent(
  new CustomEvent("corex:carousel:scroll-next", { bubbles: false, detail: { instant: true } })
)
el?.dispatchEvent(
  new CustomEvent("corex:carousel:scroll-prev", { bubbles: false, detail: { instant: true } })
)

  

    <.action phx-click="api_carousel_server_play" class="button button--sm">Play</.action>
<.action phx-click="api_carousel_server_pause" class="button button--sm">Pause</.action>
<.action phx-click="api_carousel_server_scroll_next" class="button button--sm">Next</.action>
<.action phx-click="api_carousel_server_scroll_prev" class="button button--sm">Prev</.action>
<.action phx-click="api_carousel_server_scroll_next_instant" class="button button--sm">
  Next (instant)
</.action>
<.action phx-click="api_carousel_server_scroll_prev_instant" class="button button--sm">
  Prev (instant)
</.action>
<.carousel
  id="api-carousel-play-server"
  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")
]
}
  autoplay
  loop
  class="carousel"
>
  <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>
</.carousel>

  

    def handle_event("api_carousel_server_play", _params, socket) do
  {:noreply, Corex.Carousel.play(socket, "api-carousel-play-server")}
end

def handle_event("api_carousel_server_pause", _params, socket) do
  {:noreply, Corex.Carousel.pause(socket, "api-carousel-play-server")}
end

def handle_event("api_carousel_server_scroll_next", _params, socket) do
  {:noreply, Corex.Carousel.scroll_next(socket, "api-carousel-play-server")}
end

def handle_event("api_carousel_server_scroll_prev", _params, socket) do
  {:noreply, Corex.Carousel.scroll_prev(socket, "api-carousel-play-server")}
end

def handle_event("api_carousel_server_scroll_next_instant", _params, socket) do
  {:noreply, Corex.Carousel.scroll_next(socket, "api-carousel-play-server", true)}
end

def handle_event("api_carousel_server_scroll_prev_instant", _params, socket) do
  {:noreply, Corex.Carousel.scroll_prev(socket, "api-carousel-play-server", true)}
end