Carousel

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.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the components design.

NOTE: The

id

prop is required for each carousel to manage its unique state and interaction.

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, 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.

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

<!--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.

<!--ADD a UNIQUE id TO Carousel-->
<.carousel id="unique_id">
  <:slide image="/path" image_class="Classed of image" />
  <:slide image="/path" image_class="Classed of image" />
  <:slide image="/path" image_class="Classed of image" />
  <:slide image="/path" image_class="Classed of image" />
</.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 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.

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.

<!--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.

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).

<!--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.

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

<!--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 phenoix 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 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.

Slide 1

Slide 2

Slide 3

Slide 4

<!--ADD a UNIQUE id TO Carousels-->

<.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.

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

<!--ADD a UNIQUE id TO Carousels-->

<.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.

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

<!--ADD a UNIQUE id TO Carousels-->

<.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.

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

<!--ADD a UNIQUE id TO Carousels-->

<.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.

<!--ADD a UNIQUE id TO Carousels-->

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

Name	Type	Required	Description
id	string	Yes	A unique identifier is used to manage state and interaction.
class	string	No	Custom CSS class for additional styling.
overlay	string	No	Determines the color theme of the card. Supported values: natural, white, dark, primary, secondary, success, warning, danger, info, silver, misc, dawn. Default: natural.
size	string	No	Determines the overall size of the elements. Default: large.
padding	string	No	Determines padding for items inside the carousel. Default: medium.
text_position	string	No	Determines the position of the text inside the carousel. Default: center.
indicator	boolean	No	Specifies whether to show indicators for slides. Default: false.
control	boolean	No	Determines whether to show navigation controls. Default: true.

Name	Type	Required	Description
image	string	Yes	Image link to be displayed in the slide.
image_class	string	No	Custom CSS class for additional styling of the image.
navigate	string	No	Defines the path for navigation within the application.
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 slide.
description	string	No	Determines a short description for the slide.
title_class	string	No	Custom CSS class for additional styling of the title.
description_class	string	No	Custom CSS class for additional styling of the description.
wrapper_class	string	No	Custom CSS class for styling the wrapper of the slide.
content_position	string	No	Determines the alignment of the content in the slide.
class	string	No	Custom CSS class for additional styling of the slide.
active	boolean	No	Indicates whether the slide is currently active and visible.

Name	Type	Options	Recommended?
`--color`	string	natural - white - primary - secondary - dark - success - warning - danger - info - silver - misc - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--padding`	string	extra_small - small - medium - large - extra_large	Yes
`--only`	string	carousel	Yes
`--module`	string	Something	NO

Mishka