Carousel

Overview

• Carousel is a collection of images that are displayed one at a time

• The Carousel component displays a series of images in a single container, with image indicators and a control button below the image panel

• Carousel displays one image at a time, and you can select particular images by clicking the indicators

• Carousel provides a header and descriptive text that displays below the image

Attributes

Model

• Models are used to display content in the layout

• Typically used for record creation or editing, as well as various types of messaging

• A Model needs to be added when you perform any action in an event, refer to this link Models

  • In the carousel, you can bind the multi-record model to display the data and images

  • Model will add

    Open

    

     

  • Create New Model: You can either choose the model from the list or you can create the new model by clicking on “Create New Model“ Option for your table

Head Line

• The fields you created are displayed in the Head Line attribute and the data which you saved in that field is displayed below the carousel image

• Click on Head Line

• Selects the field from the dropdown menu

  Open

  

Source

• In the source, attribute you save the image URL which is displayed as carousel images in the carousel component layout

• Click on Source

• Selects the Source from the dropdown menu

Description

• In the Description attribute, you can give a description of the carousel images which are displayed below the Head Line attribute.

• Click on Description

• Selects the Description from the dropdown menu

Auto Scroll

• If the checkbox is true then in preview mode it automatically scrolls images

• In Preview mode

Scroll Duration

• You can set the duration for scrolling images in the carousel

• e.g. if you set 3 scroll duration then in preview mode the next image scrolls after 3 seconds

Animation Type

• In Carousel, you can use customized animation effects for slide transitions using the animation types

• Animated Carousels are way more engaging than still carousels

• There are five types of animation

  • Slides: A slide transition is how one slide is removed from the screen and the next slide is displayed during a presentation

  • Scale: An animation that controls the scale of an object. You can specify the point to use for the center of scaling

  • Fade: Fade animation is used to change the appearance and behavior of objects over a particular interval of time

    • It will provide a better look and feel for our applications

  • Flip: Flip animation is viewed by viewing successive images in a quick motion so that they seem to form a sequence

    • A flip animation is a simple type of animation created by viewing successive images so quickly that they seem to form a sequence

  • Jack In The Box: A Jack In The Box, Creates a transition effect by imitating a popular joke toy movement

    • It starts with the central fading in and continues with shaking from one side to another