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
attr :id, :string, doc: "A unique identifier for the carousel"
attr :class, :string, default: nil
attr :size, :string, default: "large", doc: "Text size: small, medium, large"
attr :padding, :string, default: "medium", doc: "Padding: small, medium, large"
attr :text_position, :string, default: "center", doc: "Text position: start, center, end"
attr :indicator, :boolean, default: false, doc: "Show slide indicators"
attr :indicator_style, :string, default: "bars", doc: "bars or dots"
attr :control, :boolean, default: true, doc: "Show navigation controls"
attr :active_index, :integer, default: 0, doc: "Initial active slide index"
attr :autoplay, :boolean, default: false, doc: "Enable autoplay"
attr :autoplay_interval, :integer, default: 5000, doc: "Autoplay interval in ms"
attr :transition_type, :string, default: "fade", doc: "fade or slide"
attr :transition_duration, :integer, default: 500, doc: "Transition duration in ms"
attr :button_style, :string, default: "overlay", doc: "overlay, below, sides, or none"
attr :rounded, :string, default: nil, doc: "Border radius: sm, md, lg, xl, 2xl, 3xl, full"
attr :slides_per_view, :integer, default: 1, doc: "Number of visible slides"
attr :gap, :string, default: "1rem", doc: "Gap between slides"
attr :swipe, :boolean, default: true, doc: "Enable touch/mouse swipe"
attr :loop, :boolean, default: true, doc: "Enable infinite looping"
attr :overlay_gradient, :boolean, default: false, doc: "Add edge gradients"
attr :brightness, :integer, default: 5, doc: "Image brightness (1-10)"
attr :orientation, :string, default: "horizontal", doc: "horizontal or vertical"
slot :slide, required: true do
attr :title, :string
attr :description, :string
attr :class, :string
attr :image, :string
attr :navigate, :string, doc: "Internal route to navigate to"
attr :href, :string, doc: "External URL"
attr :content_position, :string, doc: "start, center, or end"
end