Perspective - Carousel

Component Palette Icon:

Description

The Carousel component allows you to display a selection of rotating views at a defined rate with a link to the view on a page in your project. The Carousel component can automatically cycle through the views or a user can click through the views on demand, either way, still providing a link to the view on a page.

This version updates how the component handles drag transition ("swiping" across embedded views). Only common rotational angles are supported (90, 180, 270, 360) for drag transitions. If the Carousel's rotation doesn't match one of those angles, then drag transition is disabled.

Here are a few best practices when working with the Carousel component.

• Components such as the Video Player and Map are performance intensive components and should not be embedded in the Carousel since they can hurt session performance.
• Avoid embedding views containing carousels in a carousel. This can become confusing for users.
• Avoid embedding views that contain iFrame components. It's easy for content embedded in an iFrame to steal focus from other components. Also, depending on the content in the iFrame, it may impact performance.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

Name	Description	Property Type
views	Visible area of a page. Can have multiple views in the carousel component. viewPath: The path of the view to render in this carousel. If a path is present in the viewPath property field, an Open View icon will appear that will navigate directly to the view when clicked. viewParams: Parameters for the view. If passing parameters into the embedded view, the names here must match the parameters on that view. A dropdown list of parameters is available when the user clicks the Add Object Member icon. This makes it easy to add parameters from the rendered view. direction: Direction of the child layout. Options are row or column. Value is string. justify: Adjusts placement of view along the main axis. Options are flex-start, flex-end, or center. Value is string. alignItems: Adjusts placement of view along the cross axis. Options are flex-start, flex-end, or center. Value is string.	value: array
activePane	Active pane being displayed.	value: numeric
lazyLoad	Load views on demand or progressively.	value: boolean
autoplay	Settings controlling the rotation of views in the carousel. enabled: If true, the carousel will automatically rotate the views according to the transitionDelay. Value is boolean. transitionDelay: Delay (in ms) at which slides scroll through the carousel when autoplay is true. Value is numeric. pauseOnHover: Pauses autoplay when user hovers the mouse over the view. Value is boolean. pauseOnFocus: Pauses autoplay on focus. Value is boolean. pauseOnDotHover: Pauses autoplay when user hovers the mouse over the dot for the view. Value is boolean.	object
behavior	Behavior and interaction related carousel options. transitionSpeed: The speed (in ms) at which the carousel transitions between slides. Value is numeric. fade: Enables slides to fade in and out of view on transition. Value is boolean. mobileSwipeable: Enables swiping on mobile devices to change slides. Value is boolean. desktopDraggable: Enables scrolling via drag the desktop. Value is boolean. swipeThreshold: The maximum length of a drag in pixels before a slide transition. Threshold will be either the provided value or half the width of the slide pane, whichever is smaller. Minimum value is 50 pixels. Default is 200 pixels. Value is numeric.	object
appearance	Appearance related carousel options. Click here to see the appearance properties	object
style	Sets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object

appearance Properties

Name	Description	Property Type
dots	Carousel dots configuration. enabled: Enables dots at the bottom of the carousel component. Value is boolean. iconPath: Path to the icon that will be used. Value is string. styles: Configure active and inactive styles for the dot icon. active: Sets a style for the dot icon when active. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. inactive: Sets a style for the dot icon when inactive. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object
arrows	Carousel arrows configuration. enabled: Enables arrows at the sides of the carousel component. Value is boolean. next: Next arrow icon configuration. iconPath: Path to the icon that will be used for the next arrow, if provided. Value is string. fillColor: Fill color to apply to the icon. Value is string. style: Sets a style for the next arrow. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. previous: Previous arrow icon configuration. iconPath: Path to the icon that will be used for the next arrow, if provided. Value is string. fillColor: Fill color to apply to the icon. Value is string. style: Sets a style for the next arrow. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object
useDefaultViewWidth	Enables the use of the view's default width instead of dynamically adjusting based on the available width.	value: boolean
useDefaultViewHeight	Enables the use of the view's default height instead of dynamically adjusting based on the available height.	value: boolean
slidesToShow	Number of views to show on each carousel page.	value: numeric
slidePadding	Applies padding between slides.	value: numeric
reverse	Reverses the slide order. Meaning, the first view rendered on the component will be the last element in the views array property.	value: boolean

Component Scripts and Events

Further component interaction and functionality can be configured for all components through scripting and event actions. Right-click on the component or select Components from the Designer menubar to access the configuration popups for both of these options:

• Configure Events: Accesses the Event Configuration popup where you can configure actions to run in response to events to make the component dynamic. The Events Configurations page shows how to configure events and actions on a Perspective component.

• Configure Scripts: Accesses the Script Configuration popup where custom methods and message handlers can be added. The Scripting in Perspective section details scripting fundamentals, creating custom methods, and using message handlers.

Examples

See the Carousel Component Examples page for more examples of using the Carousel component.