Displaying a collection of images with contentFlow

The contentFlow component can be used to display a collection of images horizontally as a cover flow animation.

How to do it…

A basic definition for contentFlow for viewing a static list of car images would be as follows:

<p:contentFlow id="simple">
  <p:graphicImage value="/resources/images/autocomplete/CC.png"
    styleClass="content" />
  <p:graphicImage value="/resources/images/autocomplete/Golf.png"
    styleClass="content" />
  <p:graphicImage value="/resources/images/autocomplete/Polo.png"
    styleClass="content" />
  <p:graphicImage
    value="/resources/images/autocomplete/Touareg.png"
    styleClass="content" />
</p:contentFlow>

The visual of the component will be as follows:

The style class content should be applied to all of the nested images within the component. It's a built-in style implementation shipping with PrimeFaces.

There's more…

It is also possible to visualize a collection of car images...