You're currently browsing the Ignition 8.0 docs. Click here to view the latest docs.

General

Component Palette Icon:





IULocgo

Carousel

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.

The following feature is new in Ignition version 8.0.11
Click here to check out the other new features

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
views

Visible area of a page. Can have multiple views in the carousel component.

NameDescriptionProperty Type
viewPathThe path of the view to render in this carouselvalue: string
viewParamsParameters to provide to this rendered view.object
directionDirection of the child layout. Options are row or column.value: string 
justifyAdjusts placement of view along the main axis. Options are flex-start, flex-end, or center.value: string 
alignItemsAdjusts placement of view along the cross axis. Options are flex-start, flex-end, or center. value: string 
value: array
activePaneActive pane being displayed.value: numeric
lazyLoadLoad views on demand or progressively.value: boolean
autoplay

Settings controlling the rotation of views in the carousel.

NameDescriptionProperty Type
enabledIf true, the carousel will automatically rotate the views according to the transitionDelay.value: boolean
transitionDelayDelay (in ms) at which slides scroll through the carousel when autoplay is true.value: numeric
pauseOnHoverPauses autoplay when user hovers the mouse over the view.value: boolean
pauseOnFocusPauses autoplay on focus.value: boolean
pauseOnDotHoverPauses autoplay when user hovers the mouse over the dot for the view.value: boolean
object
behavior

Behavior and interaction related carousel options.

NameDescriptionProperty Type
transitionSpeedThe speed (in ms) at which the carousel transitions between slides.value: numeric
fadeEnables slides to fade in and out of view on transitionvalue: boolean
mobileSwipeableEnables swiping on mobile devices to change slides.value: boolean
desktopDraggableEnables scrolling via drag the desktop.value: boolean
object
appearance

Appearance related carousel options.

NameDescriptionProperty Type
dots

Carousel dots configuration.

NameDescriptionProperty Type
enabledEnables dots at the bottom of the carousel component.value: boolean
iconPathPath to the icon that will be used.value: string
styles

Configure active and inactive styles for the dot icon.

NameDescriptionProperty Type
activeSets a style for the dot icon when active. Full menu of style options is available. You can also specify a style class.object
inactiveSets a style for the dot icon when inactive. Full menu of style options is available. You can also specify a style class.object
object
object
arrows

Carousel arrows configuration.

NameDescriptionProperty Type
enabledEnables arrows at the sides of the carousel component.value: boolean
next

Next arrow icon configuration.

NameDescriptionProperty Type
iconPathPath to the icon that will be used for the next arrow, if provided.value: string
fillColorFill color to apply to the icon.string
styleSets a style for the next arrow. Full menu of style options is available. You can also specify a style class.object
object
previous

Previous arrow icon configuration.

NameDescriptionProperty Type
iconPathPath to the icon that will be used for the next arrow, if provided.value: string
fillColorFill color to apply to the icon.string
styleSets a style for the next arrow. Full menu of style options is available. You can also specify a style class.object
object
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.value: boolean
object
styleSets a style for this component. Full menu of style options is available. You can also specify a style class.object

Perspective 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
Example 1

In this example we made two view containers: one is a coordinate container and the other is flex container.

The containers are named "generic_coordinate" and "generic_flex" accordingly. Each has a Label component and a Cylindrical Tank component. The label's text Property shows the name of the view it is in. The tank's Value property shows a level above 20. The Flex view is set to display as a row. We did not adjust any other settings on these two generic screens.

Once the two view containers were set up, we created the Carousel with the following properties and values:

PropertyValueStyle Category
props.views.0.viewPathgeneric_coordinateN/A
props.view.1.viewPathgeneric_flexN/A
props.autoplay.enabledtrueN/A
props.autoplay.pauseOnHovertrueN/A
props.appearance.useDefaultViewWidthfalseN/A
props.appearance.useDefaultViewHeightfalseN/A
props.appearance.dots.iconPath/system/images/material/crop_squareN/A
props.appearance.arrows.enabledtrueN/A
props.style.borderStylesolidborder
props.style.borderWidth1pxborder
props.style.backgroundColor#EFEFEFbackground
Example 2

In this example we have set up a Carousel component that enables users to quickly move between four views showing valves and multistate buttons. The views must be created before the carousel but it doesn't matter what the contents of the views are. You could use any combination of views including duplicates. They are named as follows in the "Views - Test" folder:

  • Views - Test/CarouselView
  • Views - Test/FirstView
  • Views - Test/SecondView
  • Views - Test/ThirdView
  • Views - Test/FourthView

Properties used on the Carousel component are as follows:

PropertyValueStyle Category
props.views.0.viewPathViews - Test/FirstViewN/A
props.views.1.viewPathViews - Test/SecondViewN/A
props.views.2.viewPathViews - Test/ThirdViewN/A
props.views.3.viewPathViews - Test/FourthViewN/A
props.autoplay.enabledfalseN/A
props.appearance.useDefaultViewWidthtrueN/A
props.appearance.useDefaultViewHeighttrueN/A
props.appearance.dots.enabledtrueN/A
props.appearance.dots.iconPathmaterial/adjustN/A
props.appearance.dots.styles.active.fillColor#0000D9N/A
props.appearance.arrows.enabledtrueN/A
props.appearance.arrows.next.iconPathmaterial/arrow_rightN/A
props.appearance.arrows.next.fillColor#0000D9N/A
props.appearance.arrows.previous.iconPathmaterial/arrow_leftN/A
props.appearance.arrows.previous.fillColor#0000D9N/A
props.style.borderStyleridgeborder
props.style.borderWidth5pxborder
props.style.borderRadius20border
props.style.borderColor#808080border


  • No labels