Corex.Carousel (Corex v0.1.0-alpha.29)

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.

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>

Learn more about modifiers and Corex Design

Summary

Components

carousel(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 nil.Must be one of nil, "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.
  • Global attributes are accepted.

Slots

  • prev_trigger (required)
  • next_trigger (required)