Carousel

amx:carousel, amx:carouselItem

The Carousel component is typically used for displaying a collection of related content, usually images, that user can swipe thru. Optionally, the user may tap a carousel item to open that item (e.g. drill-down into a detailed view).

The Carousel component supports the following orientations:

Horizontal: Controls are laid out horizontally across the page. This is the default orientation.
Vertical: Controls are laid out vertically down the screen.

This component is popular on tablets, but can also be used on phones.

Appearance

Appearance characteristics for this component.

Orientation: Supports either horizontal or vertical orientation.
Alignment: Supports different alignment (i.e. top, bottom, middle) of carousel items.
Offset: Supports different offset between carousel items. Items can be separated or overlap.
Slider: Slider displays the current object number out of the total number of objects.
Focus: A single carousel item has focus. The focused item is always in the front; its label is displayed right below it.

Behavior

Common behaviors for this component.

Scrolling: Use Swipe or Drag gesture to navigate between carousel items.
Horizontal Orientation: Carousel items move from left (start) to right (end). This is the default orientation.
Vertical Orientation: Carousel items move from top (start) to bottom (end).
Trigger: Tap an item to trigger an action (typically drilling down into a detailed view).
Stretching: If you place a single Image component inside of the Carousel Item, the Image stretches to fit within the square allocated for the item (as the end user spins the carousel, these dimensions shrink or grow).
Slider: A slider allows to navigate through the Carousel collection. Typically, the thumb on the slider displays the current object number out of the total number of objects. When the total number of objects is too great to calculate, the thumb on the slider shows only the current object number.

Usage

Usage guidelines for this component.

Carousels can be used on a phone, but they are popular component on tablet devices.
Use it for displaying a collection of Image components, but other components can be displayed too.
Use it for cover flows and square containers.
Use of the slider allows for large scale changes in the carousel.
Carousel items should not be crowded and should display useful content.
Carousels can be used on phones, but they are popular component on tablet devices.

Sample

AMX sample code for this component.

 <amx:carousel id="carousel" var="item"
    auxiliaryOffset="#{pageFlowScope.pAuxiliaryOffset}"
    auxiliaryPopOut="#{pageFlowScope.pAuxiliaryPopOut}"
    auxiliaryScale="#{pageFlowScope.pAuxiliaryScale}"
    controlArea="#{pageFlowScope.pControlArea}"
    disabled="#{pageFlowScope.pDisabled}"
    displayItems="#{pageFlowScope.pDisplayItems}"
    halign="#{pageFlowScope.pHalign}"
    inlineStyle="#{pageFlowScope.pInlineStyle}"
    orientation="#{pageFlowScope.pOrientation}"
    shortDesc="#{pageFlowScope.pShortDesc}"
    styleClass="#{pageFlowScope.pStyleClass}"
    valign="#{pageFlowScope.pValign}"
    value="#{bindings.contacts.collectionModel}"
    rendered="#{pageFlowScope.pRendered}">

    <amx:facet name="nodeStamp">

    <amx:carouselItem id="ci1" text="#{item.first} #{item.last}" shortDesc="#{item.id}">

    <amx:panelFormLayout id="panelFormLayout1" labelPosition="topStart" fieldHalign="start">

    <amx:panelLabelAndMessage id="panelLabelAndMessage3" label="ID">

    <amx:outputText value="#{item.id}" id="outputText3"/>

    </amx:panelLabelAndMessage>

    <amx:panelLabelAndMessage id="panelLabelAndMessage1" label="First">

    <amx:outputText value="#{item.first}" id="outputText2"/>

    </amx:panelLabelAndMessage>

    <amx:panelLabelAndMessage id="panelLabelAndMessage2" label="Last">

    <amx:outputText value="#{item.last}" id="outputText4"/>

    </amx:panelLabelAndMessage>

    <amx:panelLabelAndMessage id="panelLabelAndMessage4" label="Phone">

    <amx:outputText value="#{item.phone}" id="outputText1"/>

    </amx:panelLabelAndMessage>

    </amx:panelFormLayout>

    </amx:carouselItem>

    </amx:facet>

    </amx:carousel>

Used On: Phone, Tablet
Also Called: Cover Flow, Swipe View
Related Components: List View
Resources: None

Fig 1. iOS Carousel Full

Fig 2. Android Carousel Full

Fig 3. iOS Carousel Compact

Fig 4. Android Carousel Compact