PrimeFaces Cookbook

Visualizing data with carousel

The carousel component is for visualizing the data, to display a data set or general content with sliding effects.

How to do it...

A simple carousel definition for displaying a list of cars is given as follows:

<p:carousel id="simple" value="#{carouselController.cars}" var="car" headerText="Cars">
<h:panelGrid columns="1">
<p:graphicImagevalue="/resources/images/autocomplete/#{car.name}.png" width="100" height="70"/>
<h:outputText value="#{car.name}" />
</h:panelGrid>
</p:carousel>

This will be rendered as follows:

There's more...

By default, carousel lists its items in pages with size 3. This can be customized with the ...