Carousel

Style

Semantic colors, layout density, corner radius, and width utilities via modifier classes on the carousel.

Hex doc

Phoenix

Semantic

Use class="ui-{role}" to set the semantic palette of a carousel.

Available options: accent, alert, brand, info, success

    <.carousel id="carousel-style-default" 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")
]
} class="carousel w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>
<.carousel id="carousel-style-accent" 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")
]
} class="carousel ui-accent w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>
<.carousel id="carousel-style-brand" 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")
]
} class="carousel ui-brand w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>
<.carousel id="carousel-style-alert" 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")
]
} class="carousel ui-alert w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>
<.carousel id="carousel-style-info" 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")
]
} class="carousel ui-info w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>
<.carousel id="carousel-style-success" 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")
]
} class="carousel ui-success w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

Variant

Variant modifiers control carousel surface treatment. Default is subtle (neutral fill and border; semantic roles tint text ink); add ui-solid for a filled surface.

    <.carousel id="carousel-style-variant-subtle" 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")
]
} class="carousel w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>
<.carousel id="carousel-style-variant-solid" 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")
]
} class="carousel ui-solid w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

Semantic × variant

Combine semantic palette and variant treatment on the same host, for example carousel ui-accent ui-solid.

    <.carousel 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")
]
} class="carousel w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-solid w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-ghost w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-accent w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-accent ui-solid w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-accent ui-ghost w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-alert w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-alert ui-solid w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-alert ui-ghost w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-brand w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-brand ui-solid w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-brand ui-ghost w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-info w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-info ui-solid w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-info ui-ghost w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-success w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-success ui-solid w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel 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")
]
} class="carousel ui-success ui-ghost w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

Size

Use class="ui-size-{size}" to set the size of a carousel.

Available options: xs, sm, md (default), lg, xl

    <.carousel id="carousel-style-sm" 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")
]
} class="carousel ui-size-sm w-full max-w-3xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>
<.carousel id="carousel-style-md" 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")
]
} class="carousel ui-size-md w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>
<.carousel id="carousel-style-lg" 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")
]
} class="carousel ui-size-lg w-full max-w-md">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>
<.carousel id="carousel-style-xl" 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")
]
} class="carousel ui-size-xl w-full max-w-lg">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a carousel.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

    <.carousel id="carousel-style-rounded-default" 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")
]
} class="carousel w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>
<.carousel id="carousel-style-rounded-none" 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")
]
} class="carousel ui-rounded-none w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>
<.carousel id="carousel-style-rounded-sm" 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")
]
} class="carousel ui-rounded-sm w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>
<.carousel id="carousel-style-rounded-md" 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")
]
} class="carousel ui-rounded-md w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>
<.carousel id="carousel-style-rounded-lg" 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")
]
} class="carousel ui-rounded-lg w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>
<.carousel id="carousel-style-rounded-xl" 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")
]
} class="carousel ui-rounded-xl w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>
<.carousel id="carousel-style-rounded-full" 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")
]
} class="carousel ui-rounded-full w-full max-w-xs">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

Max width

Without max-w-*, width comes from component CSS. Default for carousel: md (width: 100%).

Use class="max-w-{step}" to set the maximum width of a carousel root.

Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md (default), lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (md)

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

    <.carousel id="carousel-style-max-default" 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")
]
} class="carousel">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel id="carousel-style-max-sm" 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")
]
} class="carousel max-w-sm">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel id="carousel-style-max-md" 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")
]
} class="carousel max-w-md">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel id="carousel-style-max-lg" 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")
]
} class="carousel max-w-lg">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel id="carousel-style-max-xl" 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")
]
} class="carousel max-w-xl">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel id="carousel-style-max-2xl" 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")
]
} class="carousel max-w-2xl">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel id="carousel-style-max-3xl" 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")
]
} class="carousel max-w-3xl">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel id="carousel-style-max-4xl" 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")
]
} class="carousel max-w-4xl">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel id="carousel-style-max-5xl" 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")
]
} class="carousel max-w-5xl">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel id="carousel-style-max-6xl" 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")
]
} class="carousel max-w-6xl">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel id="carousel-style-max-7xl" 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")
]
} class="carousel max-w-7xl">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel id="carousel-style-max-8xl" 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")
]
} class="carousel max-w-8xl">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>

<.carousel id="carousel-style-max-9xl" 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")
]
} class="carousel max-w-9xl">
    <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
    <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>

</.carousel>