The Carousel Field is used to display images or data in a customizable carousel layout. Data for the carousel pages is returned from a target.
The carousel has two layout options – basic and advanced. The basic layout is a predefined generic format that allows you to easily slot in images that’s automatically formatted on the carousel pages for you. The advanced layout gives you full control over the pages’ appearance, allowing you to specify raw HTML with your own CSS styles to tailor the pages’ look to suit your business requirements and populate them with the returned target images/data.
Example of a Basic carousel layout.
Example of an Advanced carousel layout.
Where Do We Get the Data for This Control?
Contains the target information of the target that will be called to get the carousel data.
Type
Determines the layout type of the carousel.
The basic type uses only images as data, while the advanced type can be customized with HTML and CSS.
Carousel Keys
Only applicable when “Type” is set to “Advanced”.
Specifies the names of the columns in the target that contains the value that will be inserted into the HTML. Names are case sensitive and should be separated by a comma with no spaces (for example: KeyOne,KeyTwo,KeyThree).
Carousel HTML
Only applicable when “Type” is set to “Advanced”.
Determines the custom HTML and CSS that will be used in an advanced carousel layout. If inserting data into the HTML from TSQL, ensure that the Keys are correctly identified in the HTML (for example: {CardKey}).
Page Index
Determines the starting page of the carousel component on load.
Carousel Height (px)
Determines the height of the carousel container in pixels, and the image height on basic layout.
Show Arrows
Determines the visibility of the carousel left and right navigation arrows.
Show Pager
Determines the visibility of the navigation pager dots at the bottom of the carousel.
Loop Pages
Determines if the carousel pages will loop back to the start after the last page when navigating with the arrows and on auto page change (if “Auto Page Change” is set to “Yes”).
Auto Page Change
Determines if the carousel pages will change automatically after a specified period of time.
Page Change Interval (sec)
Only applicable when “Auto Page Change” is set to “Yes”.
Specifies the interval in seconds for automatically changing the carousel pages.