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 rows attribute. When the circular attribute is set to true, carousel will scroll to the first page after the last one. The vertical attribute enables the carousel to scroll vertically, as seen in the following screenshot:
It is possible to have carousel start scrolling automatically after it is initialized, by...
