# `LineaUI.Components.Carousel`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/carousel.ex#L1)

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.

# `carousel`

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

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

# `carousel_slide`

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.

    <.carousel_slide class="w-10/12">
      <img class="h-full w-full rounded-lg object-cover" src="/a.jpg" alt="" />
    </.carousel_slide>

## Attributes

* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

*Consult [api-reference.md](api-reference.md) for complete listing*