Skip to main content
Version: 8.1

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.

NameDescriptionProperty Type
viewsVisible area of a page. Can have multiple views in the carousel component.
  • viewPath: The path of the view to render in this carousel.

      New in 8.1.29
      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.

      New in 8.1.4
      As of 8.1.4 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
    activePaneActive pane being displayed.value: numeric
    lazyLoadLoad views on demand or progressively.value: boolean
    autoplaySettings 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
    behaviorBehavior 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.
  • object
    appearanceAppearance related carousel options. Click here to see the appearance propertiesobject
    styleSets 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

    NameDescriptionProperty Type
    dotsCarousel 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
    arrowsCarousel 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
    useDefaultViewWidthEnables the use of the view's default width instead of dynamically adjusting based on the available width.value: boolean
    useDefaultViewHeightEnables the use of the view's default height instead of dynamically adjusting based on the available height.value: boolean
    slidesToShowNumber of views to show on each carousel page.value: numeric
    slidePaddingApplies padding between slides.value: numeric
    reverseReverses the slide order. Meaning, the first view rendered on the component will be the last element in the views array property.value: boolean

    Component Events

    The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

    Examples

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