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