Carousel
Check out the function of the Carousel element.
It is a UI element where each prepared slide area can be displayed fully or half according to the screen width. Since data is a repeating element, according to the content you will prepare in the first slide, the data from the data source will be displayed on other slides.
Adding Carousel
You can add the Carousel element from the Elements panel by dragging and dropping it to the screen. If you drag it to an empty area on the screen, it is added with the Row element. If you drag it into a Column you just add the Carousel element.
Carousel supports both web and mobile applications.
1. Properties
Since Carousel is a Data Repeater type element, its field will be blank in the preview unless the data source connection is made. The linked data source will automatically reproduce based on its content. You can give role-based authorizations to the element as well as set its visibility with show/hide/conditional options.
No Data Found Message
You can edit the empty status message when there is no data in the data source connected to the Carousel element.
Datasource
It is the field where you select the source whose data will be displayed in the Carousel.
Fade
You can give transition effects by melting Carousel slides.
Hover Font Color
When the cursor is on the relevant Carousel slide, you can change the font color when you use a Label etc element in its content.
Hover Bg Color
You can change the background color when the cursor hovers over the relevant Carousel slide.
Swipe
You can add swipe with finger gestures on mobile app or touch screens.
Vertical
Carousel slides come horizontally side by side by default. With Vertical, you can have it sorted vertically from top to bottom.
Pause On Dots Hover
You can hide the interaction that appears when the cursor is dragged over the dots at the bottom of the slides.
Autoplay
You can give automatic transition feature to slides.
Auto Speed
You can set the speed of the slide auto-switch feature.
Starting Index
You can select the start slide when the screen first loads.
Dots
You can hide points for interaction under the Carousel. They come active/visible by default.
Authorization
You can use the authorization options for the Carousel element.
Visibility
You can manage the visibility of the element. It can be always visible or hidden, or you can make it appear or hide depending on a condition.
You can add the actions to the Carousel element with Add Actions.
2. Styling
You can make additional edits to the Carousel element by adding a layout, text, fill, border, or shadow.
You can make visual adjustments such as environmental interior spaces and sizing. Depending on the size of the carousel, you can align the elements in it.
You can adjust the color and size of the carousel text and icon with the Text section.
You can add color or image to the carousel body.
You can add lines to the outer edges of the carousel and give corner bevels.
You can add a shadow effect to the Carousel element.
Last updated
