Overview
The Carousel component displays a series of images one at a time, allowing users to view each image in sequence. It retrieves images from object fields that are of the URL data type, enabling the display of dynamic content.
For example, In a product showcase application, the Carousel component can be used to display a series of product images. Users can view each image in sequence with smooth transitions, and the Carousel can be configured to show only when certain criteria are met, such as on a product detail page.
Basic Attributes
Attributes are the options available for each component, allowing you to customize its appearance and functionality. They help you tailor the look and behavior of your components to fit your needs.
Attribute Group | Attribute Name | Description |
---|---|---|
Model | Model |
Note: Create a multi-record model, as the Carousel works only with multi-record models. Reference: Model Creation. |
Basic | Head Line | The fields you created appear in the Head Line attribute, and the data saved in these fields is displayed below the carousel image. |
Source | In the Source Field, you can select a field with a URL data type where the Carousel image is stored. | |
Description | In this field, you can provide a description for the carousel images. You can choose fields to show for the description.. | |
Auto Scroll | When the "Auto Scroll" checkbox is marked as true, the carousel images will automatically scroll. Note: The Scroll Duration field becomes visible after marking the checkbox as true. | |
Scroll Duration | In the Scroll Duration field, you can set the time interval after which the image will automatically scroll. | |
Animation Type | Here, you can animate your image using various effects such as
|
UI Attributes:
Attribute Group | Attribute Name | Description |
---|---|---|
UI | Component Size |
Note: Currently, we support Component Size |
Padding Location | "Padding Location" typically refers to the configuration of spacing around elements | |
Padding Size | "Padding Size" refers to the amount of space added inside an element, between the element's content and its border or edge. | |
Margin Location | "Margin Location" refers to the spacing around the outside edge of an element | |
Margin Size | "Margin Size" refers to the amount of space around the outside edges of an element, | |
Style |
Reference: Style | |
Classes |
| |
Visibility | Visibility Type | It determines whether a component is visible on the layout. It offers the following visibility types:
Reference: |
Component | Component Label | It simply shows the name of the Rating component. |
Events
Events available for any component is of onload type.
Onload Events:
onload event occurs when the component has been loaded.
Here, only onload event actions are available for components.
Actions are basically workflow actions, which you can explore in Workflow here.
Add Comment