Corex.Carousel (Corex v0.1.0-beta.1)

View Source

Phoenix implementation of Zag.js Carousel.

Examples

Basic with image URLs

<.carousel id="car" items={["/images/beach.jpg", "/images/fall.jpg", "/images/sand.jpg"]} class="carousel">
  <:prev_trigger>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
  </:prev_trigger>
  <:next_trigger>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
  </:next_trigger>
</.carousel>

Items can be URLs (strings) or maps with :url and optional :alt keys.

API

Imperative helpers target the carousel by DOM id on the hook root (the same id you pass to carousel/1).

Events

From the client, dispatch CustomEvents on the hook root (#your-id):

TypePurpose
corex:carousel:playStart or resume autoplay
corex:carousel:pausePause autoplay
corex:carousel:scroll-nextNext page; optional detail.instant boolean
corex:carousel:scroll-prevPrevious page; optional detail.instant boolean

From LiveView, push_event names: carousel_play, carousel_pause, carousel_scroll_next, carousel_scroll_prev with payload %{"id" => ...} and optional "instant" for scroll events.

Styling

Use data attributes to target elements:

[data-scope="carousel"][data-part="root"] {}
[data-scope="carousel"][data-part="control"] {}
[data-scope="carousel"][data-part="item-group"] {}
[data-scope="carousel"][data-part="item"] {}
[data-scope="carousel"][data-part="prev-trigger"] {}
[data-scope="carousel"][data-part="next-trigger"] {}
[data-scope="carousel"][data-part="indicator-group"] {}
[data-scope="carousel"][data-part="indicator"] {}

If you wish to use the default Corex styling, you can use the class carousel on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/carousel.css";

You can then use modifiers

<.carousel class="carousel carousel--accent carousel--lg" items={[]}>
</.carousel>

Summary

Components

carousel(assigns)

API

pause(carousel_id)

Pauses carousel autoplay from the client.

pause(socket, carousel_id)
play(carousel_id)

Starts or resumes carousel autoplay from the client. Returns a Phoenix.LiveView.JS command.

play(socket, carousel_id)
scroll_next(carousel_id)

Scrolls to the next page from the client.

scroll_next(carousel_id, instant)

Scrolls to the next page from the client. Pass true for instant to skip animation.

scroll_next(socket, carousel_id, instant)
scroll_prev(carousel_id)

Scrolls to the previous page from the client.

scroll_prev(carousel_id, instant)
scroll_prev(socket, carousel_id, instant)

Functions

carousel_control(assigns)
carousel_indicator(assigns)
carousel_indicator_group(assigns)
carousel_item(assigns)
carousel_item_group(assigns)
carousel_next_trigger(assigns)
carousel_prev_trigger(assigns)
carousel_root(assigns)

Components

carousel(assigns)

Attributes

  • id (:string)
  • aria_label (:string) - Defaults to nil.
  • items (:list) (required) - List of image URLs (strings) or maps with :url and optional :alt.
  • page (:integer) - Defaults to 0.
  • controlled (:boolean) - Defaults to false.
  • dir (:string) - Defaults to "ltr". Must be one of "ltr", or "rtl".
  • orientation (:string) - Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • slides_per_page (:integer) - Defaults to 1.
  • slides_per_move (:any) - Number of slides to move per step, or "auto". Defaults to nil.
  • loop (:boolean) - Defaults to false.
  • autoplay (:boolean) - Defaults to false.
  • autoplay_delay (:integer) - Defaults to 4000.
  • allow_mouse_drag (:boolean) - Defaults to false.
  • spacing (:string) - Defaults to "0px".
  • padding (:string) - Defaults to nil.
  • in_view_threshold (:float) - Defaults to 0.6.
  • snap_type (:string) - Defaults to "mandatory". Must be one of "proximity", or "mandatory".
  • auto_size (:boolean) - Defaults to false.
  • on_page_change (:string) - Defaults to nil.
  • on_page_change_client (:string) - Defaults to nil.
  • compound (:boolean) - Enable compound mode with :let={ctx} and carousel_root, carousel_item_group, carousel_item, carousel_control, carousel_prev_trigger, carousel_next_trigger, carousel_indicator_group, carousel_indicator. Defaults to false.
  • Global attributes are accepted.

Slots

  • inner_block - Compound mode. Use compound and :let={ctx}.
  • prev_trigger - Accepts attributes:
    • class (:string)
  • next_trigger - Accepts attributes:
    • class (:string)

API

pause(carousel_id)

Pauses carousel autoplay from the client.

pause(socket, carousel_id)

play(carousel_id)

Starts or resumes carousel autoplay from the client. Returns a Phoenix.LiveView.JS command.

play(socket, carousel_id)

scroll_next(carousel_id)

Scrolls to the next page from the client.

scroll_next(carousel_id, instant)

Scrolls to the next page from the client. Pass true for instant to skip animation.

scroll_next(socket, carousel_id, instant)

scroll_prev(carousel_id)

Scrolls to the previous page from the client.

scroll_prev(carousel_id, instant)

scroll_prev(socket, carousel_id, instant)

Functions