> [!PRO] > This component is only available in the Pro version of Flux. # Carousel A horizontally scrolling row of slides with snap and edge-aware controls. ```blade ``` ## Indicators Add slide indicators for direct navigation when arrow controls are unnecessary or too prominent. ```blade
“Flux made it possible to ship a polished UI in days, not weeks. Genuinely the most fun I’ve had building an app.”
Graham Whitaker · Founder, Northwind
“When I reach for a Flux component, it just works. The defaults are obvious. A real joy to use.”
Elise Rowan · Engineering Lead, Southline Studio
“I stopped writing UI primitives entirely. Flux + Livewire is the closest thing to a content-first dev experience for Laravel.”
Jonah Vale · CTO, Alder & Co.
 ``` ## Autoplay Automatically advance slides at a fixed interval. Autoplay pauses when the carousel is hovered, focused, or manually controlled. ```blade ``` ## External controls Use a shared `name` to place carousel controls outside the carousel layout. The `bleed` prop extends the track through surrounding padding while keeping slides aligned to the content gutter. ```blade
Popular stays Handpicked homes in beautiful places
Cottage in Mendocino
$680 for 2 nights ・
5.0
Lodge in the Thousand Islands
$370 for 2 nights ・
4.96
House in the Adirondacks
$550 for 2 nights ・
4.88
House in Cape Cod
$840 for 2 nights ・
5
``` ## Arrow position Change where the built-in arrow controls sit relative to the carousel viewport. ```blade ... ... ... ``` ## Fade Add edge fades to hint that more slides are available without covering the arrow controls. ```blade ``` ## Page advance Use page advance to move by the number of visible slides instead of one slide at a time. ```blade ``` ## Reference ### flux:carousel **Prop:** - `arrows` - If `true`, shows previous and next arrow controls over the carousel. Default: `true`. - `arrows:position` - Position for the built-in arrow controls. Options: `inside`, `overlap`, `outside`. Default: `inside`. - `arrows:class` - Additional classes applied to the built-in arrow controls. - `autoplay` - If `true`, automatically advances slides. Autoplay pauses on hover, focus, or manual interaction, and is disabled when reduced motion is preferred. - `autoplay:interval` - Time between autoplay advances in milliseconds. Default: `5000`. - `indicators` - If `true`, shows slide indicators below the carousel. Default: `false`. - `disabled` - If `true`, disables carousel controls and indicators. - `fade` - If `true`, fades the scrollable track edges when additional slides are overflowed. - `bleed` - Extends the carousel through surrounding horizontal padding while keeping slides and scroll snap positions aligned to the content gutter. Defaults to `1.5rem` and respects an inherited `--flux-bleed` value. - `snap` - Scroll snap behavior. Options: `proximity`, `mandatory`. Default: `proximity`. - `scroll` - Arrow and indicator scroll behavior. Options: `smooth`, `instant`. Default: `smooth`. - `advance` - How many slides arrow controls move. Options: `slide`, `page`. Default: `slide`. - `wrap` - What happens when advancing past the final slide. Options: `none`, `rewind`. With `rewind`, the next control remains available at the end and returns to the first slide. Default: `none`. - `name` - Unique name used to connect the carousel with external controls. - `track:class` - Additional classes applied to the scrollable track. **CSS Variable:** - `--flux-bleed` - Horizontal distance the carousel extends through its parent container. Set this to match the parent's horizontal padding. Flux cards provide it automatically. ### flux:carousel.slide **Prop:** - `class` - Classes applied to the slide. Use width classes like `w-full`, `w-4/5`, or `md:w-1/3` to control how many slides are visible. ### flux:carousel.controls **Prop:** - `name` - Name of the carousel these external controls should operate on.