Carousel

Updated Oct 18, 2026 v0.0.10

v0.0.10StableComponentStatelessJSApache-2.0

Installation mix mishka.ui.gen.component carousel

Source View Source

Overview of the Phoenix and LiveView Carousel Component

The Mishka Chelekom carousel component is a Phoenix LiveView component that allows developers to create dynamic and customizable carousels, perfect for showcasing images, content, or media within applications. It offers flexibility in layout, allowing for easy adjustment of size, transition effects, and navigation controls, ensuring a smooth and professional look.

This Phoenix LiveView component also supports adding captions, indicators, and controls, making it ideal for improving both the visual appeal and functionality of content presentation. With its responsive design and ease of use, this carousel component enhances user interaction and experience.

Slide slot

The slide slot in the Phoenix LiveView Carousel component allows you to define the individual slides for your carousel. This slot accepts various attributes that enable you to customize each slide's appearance and behavior. The image attribute sets the image displayed on the slide and alt its alternative text, while title and description allow for adding text content to the slide. Additionally, you can control the layout using content_position and apply custom styling using classes such as title_class, description_class, and wrapper_class. Moreover, the slot supports multiple navigation options like navigate for internal paths, patch for LiveView patches, and href for external URLs. You can also control whether the slide is active or not using the active attribute.

Slide slot

Images sourced from 500px.com/p/tagargtw.

heex

<!--ADD a UNIQUE id TO Carousel-->
<.carousel id="unique_id">
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
</.carousel>

Image and image class props of slide slot in Phoenix LiveView carousel component

The slide slot includes the image attribute, which allows you to display an image alongside content in the carousel. This attribute is essential for adding visual elements to each slide. Additionally, the image_class attribute provides flexibility in styling the image by allowing you to apply custom CSS classes. This ensures that the image can be styled according to specific design requirements, giving control over its appearance within the carousel.

Give each slide an alt that says what its image shows, for screen readers and for search engines. An empty alt="" marks the image as decorative, which is also what a slide with no alt gets.

Image and image class props of slide slot in Phoenix LiveView carousel component

heex

<!--ADD a UNIQUE id TO Carousel-->
<.carousel id="unique_id">
  <:slide image="/path" alt="What the first image shows" image_class="grayscale" />
  <:slide image="/path" alt="What the second image shows" image_class="grayscale" />
  <:slide image="/path" alt="What the third image shows" image_class="grayscale" />
  <:slide image="/path" alt="" image_class="grayscale" />
</.carousel>

Add link to a slide in Phoenix LiveView carousel component

The slide slot supports navigation through three key attributes. The navigate attribute defines a path for internal navigation within the application, allowing users to move between pages using the specified route. The patch attribute enables navigation through a LiveView patch, maintaining the state of the page while loading new content. Lastly, the href attribute sets the URL for an external link, making it possible to link out to other websites or resources. All of these attributes help streamline navigation and enhance user experience.

Add link to a slide in Phoenix LiveView carousel component

heex

<!--ADD a UNIQUE id TO Carousel-->
<.carousel id="unique_id">
  <:slide image="/path" patch="/path" />
  <:slide image="/path" patch="/path" />
  <:slide image="/path" patch="/path" />
  <:slide image="/path" patch="/path" />
</.carousel>

Display content on the slide

Each slide in the carousel component allows you to add custom content using attributes such as title and description. The title defines the main heading or label for the slide, while the description provides a short text that elaborates on the content or message of the slide. Additionally, for further customization, the title_class and description_class attributes allow you to apply your own CSS classes, giving you control over the styling and presentation of the title and description on each slide. Furthermore, by using the wrapper_class attribute, you can add custom classes to the entire content wrapper of each slide, ensuring complete control over the layout and design. This flexibility makes it easy to match the slide's content with your design needs.

Display content on the slide

Mishka Chelekom Carousel

Easy to use

By simply using a few props, you can display the images you want and customize the content to fit your needs.

Easily position your content anywhere on the carousel, whether it's at the top, bottom, center, or sides. With flexible options, you can customize the look and feel of your carousel to perfectly match your design and layout preferences.

heex

<!--ADD a UNIQUE id TO Carousel-->
<.carousel id="unique_id">
  <:slide
    image="/path"
    title="This is title prop"
  />
  <:slide
    image="/path"
    title="This is title prop"
    description="This is description prop"
  />
  <:slide
    image="/path"
    description="This is description prop"
  />
</.carousel>

Position of content on each slide

The content_position attribute allows you to control the alignment of the content within each slide in the carousel. It accepts various values that determine how the content is positioned horizontally. The "start" value aligns the content to the left, while "end" aligns it to the right. For centered content, you can use "center". Additionally, there are options like "between", which distributes content evenly with space between the items, and "around", which adds equal space around the content. If no value is provided, the default is to center the content, ensuring that it fits well with most design layouts. This flexibility allows you to adjust content placement to suit your specific design needs.

Position of content on each slide

Content position is set to around.

Content position is set to start.

Content position is set to end.

Content position is set to center(default).

heex

<!--ADD a UNIQUE id TO Carousel-->
<.carousel id="unique_id">
  <:slide
    image="/path"
    title="This is title prop"
    content_position="start"
  />
  <:slide
    image="/path"
    title="This is title prop"
    description="This is description prop"
    content_position="end"
  />
  <:slide
    image="/path"
    description="This is description prop"
    content_position="center"
  />
  <:slide
    image="/path"
    description="This is description prop"
    content_position="between"
  />
  <:slide
    image="/path"
    description="This is description prop"
    content_position="around"
  />
</.carousel>

Slide Active prop

The active prop is a boolean attribute that indicates whether a slide is currently active and visible in the carousel. When set to true, the slide becomes the initial or visible slide, while other slides remain hidden until navigated to. This prop is essential for controlling the display of the starting slide in the carousel.

Slide Active prop

This is the third slide, and it's set as the active slide, so it will be shown first.

heex

<!--ADD a UNIQUE id TO Carousel-->
<.carousel id="unique_id">
  <:slide image="/path" />
  <:slide image="/path" active />
  <:slide image="/path" />
  <:slide image="/path" />
</.carousel>

<.carousel id="unique_id">
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" active />
  <:slide image="/path" />
</.carousel>

Overlay prop in Phoenix LiveView carousel component

The overlay prop in the carousel component allows you to add a semi-transparent color overlay on top of each slide. You can specify the color by using predefined values such as base, primary, success, danger, and more. This overlay adds a visual layer, slightly dimming the slide's background to make the text or content stand out more. By customizing the overlay, you can align the carousel’s appearance with your design preferences. By default it;s dark.

Overlay prop in Phoenix LiveView carousel component

Slide 1

Slide 2

Slide 3

Slide 4

heex

<.carousel id="unique_id" overlay="primary">
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
</.carousel>

<.carousel id="unique_id" overlay="secondary">
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
</.carousel>

<.carousel id="unique_id" overlay="success">
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
</.carousel>

<.carousel id="unique_id" overlay="warning">
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
</.carousel>

<.carousel id="unique_id" overlay="danger">
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
</.carousel>

<.carousel id="unique_id" overlay="info">
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
</.carousel>

<.carousel id="unique_id" overlay="misc">
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
</.carousel>

<.carousel id="unique_id" overlay="dawn">
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
</.carousel>

<.carousel id="unique_id" overlay="light">
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
</.carousel>

<.carousel id="unique_id" overlay="dark">
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
  <:slide image="/path" />
</.carousel>

Size prop

The size prop in the carousel component controls the overall sizing of the text for the title, description, and the maximum width of the content wrapper. Depending on the size value such as extra_small, small, medium, large, or extra_large, the text and content dimensions are adjusted to fit the design needs. For example, it changes the font size of titles, descriptions, and ensures the wrapper's content width adapts accordingly. By default, the size is set to large.

Size prop

First Slide extra small size of carousel

Second Slide extra small size of carousel

Third slide extra small size of carousel

Fourth slide extra small size of carousel

heex

<.carousel id="unique_id" size="extra_small">
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
</.carousel>

<.carousel id="unique_id" size="small">
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
</.carousel>

<.carousel id="unique_id" size="medium">
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
</.carousel>

<.carousel id="unique_id" size="large">
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
</.carousel>

<.carousel id="unique_id" size="extra_large">
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
</.carousel>

Padding prop

The padding prop in the carousel component controls the overall padding of the content wrapper. Depending on the padding value such as extra_small, small, medium, large, or extra_large the padding of content change. It's medium by default.

Padding prop

First Slide extra small padding of carousel

Second Slide extra small padding of carousel

Third slide extra small padding of carousel

Fourth slide extra small padding of carousel

heex

<.carousel id="unique_id" padding="extra_small">
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
</.carousel>

<.carousel id="unique_id" padding="small">
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
</.carousel>

<.carousel id="unique_id" padding="medium">
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
</.carousel>

<.carousel id="unique_id" padding="large">
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
</.carousel>

<.carousel id="unique_id" padding="extra_large">
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
</.carousel>

Text position prop

The text_position prop in the carousel component allows you to control the alignment of the text content within the description wrapper. You can set the text alignment to start for left-aligned text, end for right-aligned text, or center for centered text. By default, if no value is provided, the text will be aligned to the center. This flexibility allows for better control over the visual presentation and layout of text on each slide.

Text position prop

First Slide of start text position of carousel

Second Slide of start text position of carousel

Third slide of start text position of carousel

Fourth slide of start text position of carousel

heex

<.carousel id="unique_id" text_position="start">
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
</.carousel>

<.carousel id="unique_id" text_position="end">
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
</.carousel>

<.carousel id="unique_id" text_position="center">
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
</.carousel>

Indicator prop

The indicator prop is a boolean attribute that, when enabled, displays navigation indicators at the bottom of the carousel component. These indicators provide a visual cue to users about the number of slides in the carousel and allow them to quickly navigate between slides. By default, if the indicator prop is not provided, the carousel will not display indicators, offering a cleaner, simpler design. This feature enhances user experience by making it easier to understand and control the carousel's content.

Indicator prop

heex

<.carousel id="unique_id" indicator>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path" active />
</.carousel>

Previous and next labels

The previous and next buttons are icons, so each one has an accessible name for screen readers: "Previous slide" and "Next slide" by default, translated through your app's Gettext. Set previous_label and next_label to name them yourself, for example in a language your Gettext does not cover. The control prop, true by default, shows or hides the two buttons.

Previous and next labels

heex

<.carousel id="unique_id" previous_label="Previous photo" next_label="Next photo">
  <:slide image="/path" alt="What the first image shows" />
  <:slide image="/path" alt="What the second image shows" />
</.carousel>

Autoplay prop

The autoplay prop is a boolean attribute that, when enabled, allows the carousel to automatically advance through the slides at a preset interval without user interaction. This functionality is useful for drawing user attention to a sequence of images or messages in a passive viewing experience. If the autoplay prop is not specified or set to false, users must manually navigate through the slides using controls or indicators. This prop adds convenience and can improve content visibility in scenarios like featured content sliders or announcements.

Autoplay prop

heex

<.carousel autoplay>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path" active />
</.carousel>

Autoplay Interval Prop

The autoplay_interval prop specifies the amount of time (in milliseconds) that the carousel will wait before advancing to the next slide when autoplay is enabled. This value allows you to control the slide transition timing and create a smooth, automatic progression through your slides. The default value is set to 3000, ensuring a three-second interval between transitions.

Autoplay Interval Prop

heex

<.carousel autoplay autoplay_interval={3000}>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path"/>
  <:slide image="/path" active />
</.carousel>

Attributes

Name	Type	Default	Values	Required	Description
`id`	`string`	—	—	No	A unique identifier is used to manage state and interaction
`class`	`any`	—	—	No	Custom CSS class for additional styling
`overlay`	`string`	`base`	—	No	Determines an overlay
`size`	`string`	`large`	`extra_smallsmallmediumlargeextra_large`	No	Determines the overall size of the elements, including padding, font size, and other items
`padding`	`string`	`medium`	`extra_smallsmallmediumlargeextra_large`	No	Determines padding for items
`text_position`	`string`	`center`	—	No	Determines the element's text position
`rest`	`global`	—	—	No	Global attributes can define defaults which are merged with attributes provided by the caller
`indicator`	`boolean`	`false`	—	No	Specifies whether to show element indicators
`control`	`boolean`	`true`	—	No	Determines whether to show navigation controls
`previous_label`	`string`	—	—	No	Accessible name of the previous button, translated "Previous slide" when not set
`next_label`	`string`	—	—	No	Accessible name of the next button, translated "Next slide" when not set
`active_index`	`integer`	`0`	—	No	Index of the active slide (starts at 0)
`autoplay`	`boolean`	`false`	—	No	Enable or disable autoplay functionality
`autoplay_interval`	`integer`	`5000`	—	No	Time between slides in ms (if autoplay is enabled)
`active_slide_class`	`string`	`active-slide z-10`	—	No	CSS class for active slide
`hidden_slide_class`	`string`	`opacity-0`	—	No	CSS class for hidden (inactive) slides
`active_indicator_class`	`string`	`active-indicator`	—	No	CSS class for active indicator

Slots

Name	Required	Description
`inner_block`	No	Inner block that renders HEEx content
`slide`	Yes	—

Attributes of the slide slot

Name	Type	Default	Values	Required	Description
`image`	`string`	—	—	No	Image displayed alongside of an item
`alt`	`string`	—	—	No	Alternative text of the slide image, an empty string marks it as decorative
`image_class`	`string`	—	—	No	Determines custom class for the image
`navigate`	`string`	—	—	No	Defines the path for navigation within the application using a `navigate` attribute.
`patch`	`string`	—	—	No	Specifies the path for navigation using a LiveView patch.
`href`	`string`	—	—	No	Sets the URL for an external link.
`title`	`string`	—	—	No	Specifies the title of the element
`description`	`string`	—	—	No	Determines a short description
`title_class`	`string`	—	—	No	Determines custom class for the title
`description_class`	`string`	—	—	No	Determines custom class for the description
`wrapper_class`	`string`	—	—	No	Determines custom class for the wrapper
`content_position`	`string`	—	—	No	Determines the alignment of the element's content
`class`	`any`	—	—	No	Custom CSS class for additional styling
`active`	`boolean`	—	—	No	Indicates whether the element is currently active and visible

Options

Each option takes one or more of its values, separated by commas.

Option	Values
`--color`	`basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn`
`--size`	`extra_smallsmallmediumlargeextra_large`
`--padding`	`extra_smallsmallmediumlargeextra_large`
`--module`	A module name of your own

What it generates

Functions carousel

Helpers None

Generated with it imageicon

Command mix mishka.ui.gen.component carousel