Carousel
A customizable carousel component for displaying slides with navigation controls, indicators, and multiple transition effects.
Basic Carousel
A simple carousel with default fade transition and overlay navigation buttons.
With Title and Description
Add titles and descriptions to provide context for each slide.
Clean and beautiful interfaces for your applications
Drop-in components that work out of the box
Built with Phoenix LiveView for seamless experiences
Slide Transition
Use slide transitions instead of fade for horizontal movement between slides.
Smooth horizontal transitions between slides
Swipe-friendly on touch devices and trackpads
Automatically snaps to each slide position
With Autoplay
Enable autoplay to automatically cycle through slides. Hover to pause.
Button Styles
Choose from overlay, below, sides, or no buttons.
Overlay Buttons (default)
Below Buttons
Side Buttons
No Buttons
Indicators
Show slide indicators with bars or dots style.
Bar Indicators (default)
Dot Indicators
Rounded Corners
Apply different border radius values from sm to 3xl.
Rounded SM
Rounded LG
Rounded 3XL
Multi-Slide View
Show multiple slides at once with responsive breakpoints.
With Gradient Overlay
Add edge gradients to hint at more content in multi-slide carousels.
Vertical Orientation
Display slides vertically with up and down navigation.
Perfect for mobile app screenshots or tall content
Touch-friendly vertical scrolling on all devices
Automatically snaps to each slide position
Non-Looping
Disable looping for a definitive start and end. Buttons disable at boundaries.
Navigation disabled when at first slide
Both navigation buttons are active here
Navigation disabled when at last slide
Brightness Control
Adjust image brightness behind text content (1-10 scale).
Brightness 2 (darker)
Better readability with darker background overlay
Darker overlays create a sophisticated aesthetic
Text pops against the darker background
Brightness 8 (lighter)
Subtle overlay lets image shine through more
Lighter overlays preserve the original image beauty
Creates a bright and welcoming atmosphere
Content Position
Position slide content at start, center, or end.
Content Position: Start
Title and description aligned to the left
Perfect for left-to-right reading patterns
Consistent alignment across all slides
Content Position: Center
Title and description centered on the slide
Great for hero sections and featured content
Creates a professional and polished appearance
Content Position: End
Title and description aligned to the right
Ideal for right-to-left languages or unique layouts
Stand out with unconventional text alignment
Clickable Slides
Make slides clickable with navigate for internal routes or href for external links.
Navigate to another page in your app
Opens in a new tab for external sites
Properties
| Attribute | Type | Default | Description |
|---|---|---|---|
active_index
|
integer |
0
|
Index of the active slide (starts at 0) |
aspect
|
string |
nil
|
Height derives from width at a fixed ratio - 16:9 (video), 4:3 (photo) or 1:1 (square) - instead of the default fixed responsive heights. Constrain the width with a wrapper (e.g. max-w-sm) for the compact product-card look; thumbnails match the ratio
one of: nil, "video", "photo", "square"
|
autoplay
|
boolean |
false
|
Enable or disable autoplay functionality |
autoplay_interval
|
integer |
5000
|
Time between slides in ms |
brightness
|
integer |
5
|
Controls image brightness behind text content (1-10, where 10 is brightest and 1 is darkest) |
button_style
|
string |
"overlay"
|
Button placement: 'overlay' (floating on the frame), 'below' (under the carousel), 'outside' (flanking the frame along the travel axis - left/right when horizontal, above/below when vertical), or 'none' |
class
|
string |
nil
|
Custom CSS class for additional styling |
control
|
boolean |
true
|
Determines whether to show navigation controls |
gap
|
string |
"1rem"
|
Gap between slides when slides_per_view > 1 |
id
|
string |
A unique identifier is used to manage state and interaction | |
indicator
|
boolean |
false
|
Specifies whether to show element indicators |
indicator_position
|
string |
"overlay"
|
overlay floats the indicators on the imagery; below places them under the frame in page colours
one of: "overlay", "below"
|
indicator_style
|
string |
"bars"
|
Style of indicators: 'bars' (horizontal bars) or 'dots' (circular dots) |
loop
|
boolean |
true
|
Enable infinite looping (when false, carousel has definitive start/end) |
orientation
|
string |
"horizontal"
|
Orientation of the carousel: 'horizontal' (default) or 'vertical'
one of: "horizontal", "vertical"
|
overlay_gradient
|
boolean |
false
|
Add gradient overlay at edges (especially useful for multi-slide views) |
padding
|
string |
"medium"
|
Determines padding for items |
rest
|
global |
Global attributes can define defaults | |
rounded
|
string |
nil
|
Border radius for slides. Unset derives from the --pc-radius theme token - amplified for the large surface and clamped at 24px so a full-radius theme gets a media-card corner, never a stadium. 'none' forces square corners; or pin one of 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'full' |
size
|
string |
"large"
|
Determines the overall size of the elements |
slides_per_view
|
integer |
1
|
Number of slides visible at once (1 for single slide, 3 for multi-slide gallery view) |
swipe
|
boolean |
true
|
Enable touch swipe navigation on mobile devices (only applies to slide transitions) |
text_position
|
string |
"center"
|
Determines the element's text position |
thumbnails
|
boolean |
false
|
Synced thumbnail strip below the carousel - image slides show their image, others a numbered chip. Click to jump; the active thumbnail follows the carousel |
transition_duration
|
integer |
500
|
Duration of transition in milliseconds |
transition_type
|
string |
"fade"
|
Type of transition between slides (fade or slide) |
:slide
slot
|
slot |