The carousel component is used to create interactive carousels with customizable attributes such as size, padding, and transition_type. It supports adding multiple slides with different content, and includes options for navigation controls and indicators.

Examples

Basic carousel with bar indicators (default)

<.carousel id="carousel-test-one" transition_type="fade" indicator={true}>
  <:slide title="Slide 1" />
  <:slide title="Slide 2" />
  <:slide title="Slide 3" />
</.carousel>

Carousel with circular dot indicators

<.carousel id="carousel-test-two" transition_type="slide" indicator={true} indicator_style="dots">
  <:slide title="Slide 1" />
  <:slide title="Slide 2" />
  <:slide title="Slide 3" />
</.carousel>

Attributes

• id (:string) - A unique identifier is used to manage state and interaction.
• class (:string) - Custom CSS class for additional styling. Defaults to nil.
• size (:string) - Determines the overall size of the elements. Defaults to "large".
• padding (:string) - Determines padding for items. Defaults to "medium".
• text_position (:string) - Determines the element's text position. Defaults to "center".
• indicator (:boolean) - Specifies whether to show element indicators. Defaults to false.
• indicator_style (:string) - Style of indicators: 'bars' (horizontal bars) or 'dots' (circular dots). Defaults to "bars".
• thumbnails (:boolean) - Synced thumbnail strip below the carousel - image slides show their image, others a numbered chip. Click to jump; the active thumbnail follows the carousel. Defaults to false.
• control (:boolean) - Determines whether to show navigation controls. Defaults to true.
• active_index (:integer) - Index of the active slide (starts at 0). Defaults to 0.
• autoplay (:boolean) - Enable or disable autoplay functionality. Defaults to false.
• autoplay_interval (:integer) - Time between slides in ms. Defaults to 5000.
• transition_type (:string) - Type of transition between slides (fade or slide). Defaults to "fade".
• transition_duration (:integer) - Duration of transition in milliseconds. Defaults to 500.
• button_style (:string) - 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'. Defaults to "overlay".
• rounded (:string) - 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'. Defaults to nil.
• slides_per_view (:integer) - Number of slides visible at once (1 for single slide, 3 for multi-slide gallery view). Defaults to 1.
• gap (:string) - Gap between slides when slides_per_view > 1. Defaults to "1rem".
• swipe (:boolean) - Enable touch swipe navigation on mobile devices (only applies to slide transitions). Defaults to true.
• loop (:boolean) - Enable infinite looping (when false, carousel has definitive start/end). Defaults to true.
• overlay_gradient (:boolean) - Add gradient overlay at edges (especially useful for multi-slide views). Defaults to false.
• brightness (:integer) - Controls image brightness behind text content (1-10, where 10 is brightest and 1 is darkest). Defaults to 5.
• orientation (:string) - Orientation of the carousel: 'horizontal' (default) or 'vertical'. Defaults to "horizontal". Must be one of "horizontal", or "vertical".
• aspect (:string) - 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. Defaults to nil. Must be one of nil, "video", "photo", or "square".
• indicator_position (:string) - overlay floats the indicators on the imagery; below places them under the frame in page colours. Defaults to "overlay". Must be one of "overlay", or "below".
• Global attributes are accepted. Global attributes can define defaults.

Slots

• slide (required) - Accepts attributes:
  • title (:string) - Title of the slide.
  • description (:string) - Description of the slide.
  • class (:string) - Custom CSS class for additional styling.
  • image (:string) - URL of the image to display in the slide.
  • navigate (:string) - Internal route to navigate to when the slide is clicked.
  • href (:string) - External URL to navigate to when the slide is clicked.
  • content_position (:string) - Position of content within the slide (defaults to 'center' if not specified). Must be one of "start", "center", or "end".