LineaUI.Components.Carousel (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's Swiper carousels, without Swiper: slides on a CSS scroll-snap track, and the LineaUI.Carousel hook for arrows, pagination, autoplay, keyboard, swipe and effects.

<.carousel id="gallery" navigation class="rounded-lg">
  <.carousel_slide><img class="h-full w-full object-cover" src="/a.jpg" alt="" /></.carousel_slide>
  <.carousel_slide><img class="h-full w-full object-cover" src="/b.jpg" alt="" /></.carousel_slide>
</.carousel>

<.carousel id="beside" navigation="outside">…</.carousel>
<.carousel id="promo" pagination="bullets" autoplay={2000} loop>…</.carousel>
<.carousel id="tall" direction="vertical" pagination="bullets" class="h-64">…</.carousel>
<.carousel id="flip" effect="flip" navigation pagination="bullets">…</.carousel>
<.carousel id="peek" gap={30} pagination="bullets">
  <.carousel_slide class="w-10/12">…</.carousel_slide>
</.carousel>

effect is one of LineOne's: slide (the scrolling track), fade, flip, cube, cards, coverflow and creative (slides stacked and moved with CSS transforms). pagination is bullets (clickable), fraction, progress (the bar on top) or scrollbar (a draggable bar at the bottom). zoom={4} zooms a slide on double click. A :background slot with data-carousel-parallax="-23%" on it, and elements inside slides with data-carousel-parallax="-300", move at their own pace while the track scrolls.

State

index is the server's slide. The person can move freely in the browser, and their slide survives patches; when the server changes index, the carousel goes there.

Events

on_change (an event name or %JS{}) runs when the active slide changes; an event name is pushed with %{"id" => id, "index" => index} (zero-based) to target, or to the LiveView.

From the server, push_event(socket, "linea:carousel", %{id: "gallery", index: 2}) moves it.

Summary

Functions

carousel(assigns)

Renders the carousel. Its children are carousel_slide/1s.

carousel_slide(assigns)

Renders one slide. Its content fills it; with zoom on the carousel, the first child is what double click zooms. Give it a width (class="w-10/12") to show the next slide peeking.

Functions

carousel(assigns)

Renders the carousel. Its children are carousel_slide/1s.

on_change is pushed with %{"id" => id, "index" => index} (zero-based) when the active slide changes; a %JS{} is executed instead. The server moves it by changing index, or with push_event(socket, "linea:carousel", %{id: id, index: n}).

<.carousel id="gallery" index={@slide} on_change="slid" navigation pagination="bullets">
  <.carousel_slide :for={src <- @images}>
    <img class="h-full w-full object-cover" src={src} alt="" />
  </.carousel_slide>
</.carousel>

def handle_event("slid", %{"index" => index}, socket), do: {:noreply, assign(socket, slide: index)}

Attributes

  • id (:string) (required)
  • index (:integer) - The active slide, zero-based. Defaults to 0.
  • effect (:string) - slide scrolls a snap track; the others stack the slides and animate them like Swiper's effects. Defaults to "slide". Must be one of "slide", "fade", "flip", "cube", "cards", "coverflow", or "creative".
  • direction (:string) - Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • navigation (:any) - The previous and next arrows. true or "inside" lays them over the track; "outside" pads the carousel and puts them beside the track (the slide effect). Defaults to false. Must be one of true, false, "inside", or "outside".
  • pagination (:string) - bullets (clickable dots), fraction (2 / 4), progress (bar on top), scrollbar (draggable bar). Defaults to nil. Must be one of nil, "bullets", "fraction", "progress", or "scrollbar".
  • autoplay (:integer) - Milliseconds between slides; pauses on hover. Defaults to nil.
  • loop (:boolean) - Wrap around past the last and first slides. Defaults to false.
  • gap (:integer) - Pixels between slides (LineOne's spaceBetween). Defaults to nil.
  • zoom (:integer) - Double-click zoom ratio. Defaults to nil.
  • on_change (:any) - Event name or %JS{}; pushed with %{"id" => id, "index" => index}. Defaults to nil.
  • target (:any) - The phx-target on_change goes to. Defaults to nil.
  • prev_label (:string) - Defaults to "Previous slide".
  • next_label (:string) - Defaults to "Next slide".
  • bullet_label (:string) - Defaults to "Go to slide".
  • label (:string) - The carousel's aria-label. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)
  • background - Behind the track, for the parallax background.