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

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

The snippet will be visualized as follows:

The preceding image is seen as a static image; by default, imageSwitch will do a slideshow on page load between the images defined. Setting the slideshowAuto attribute to false can disable this behavior. The speed of the transition can be defined by the slideshowSpeed attribute. Its default value is 3000 milliseconds.

The imageSwitch attribute uses effects for transition between images, and it supports over 25 different effects. The effect can be provided with the effect attribute and its speed can be defined by the speed attribute, which has 500 milliseconds as the default value. If no effect is specified, the built-in fade effect is used for transition. The list of the supported effects are given as follows:

With the client side API provided, it's also possible to do manual transition between the images of the imageSwitch. To trigger the slide change, two command buttons are defined, and the JavaScript defined with their onclick attribute executes the navigation between the images. The previous() and next() methods are provided by the imageSwitch component, which invokes the cycle method of jQuery Cycle Plugin with the prev and next parameters respectively.

<p:commandButton type="button"
  onclick="PF('manualSwitch').previous();"
  icon="ui-icon-circle-triangle-w" id="prev" />
<p:commandButton type="button"
  onclick="PF('manualSwitch').next();"
  icon="ui-icon-circle-triangle-e" id="next" />
<p:imageSwitch id="manual" widgetVar="manualSwitch" 
  slideshowAuto="false">
  <p:graphicImage
    value="/resources/images/autocomplete/CC.png" />
  <p:graphicImage
    value="/resources/images/autocomplete/Golf.png" />
  <p:graphicImage
    value="/resources/images/autocomplete/Polo.png" />
  <p:graphicImage
    value="/resources/images/autocomplete/Touareg.png" />
</p:imageSwitch>

The visual of the component will be as follows:

In buttons, we are accessing the imageSwitch component via JavaScript through the value of the widgetVar attribute.

<p:imageSwitch id="withData">
  <ui:repeat value="#{imageSwitchBean.cars}" var="car">
    <p:graphicImage 
      value="/resources/images/autocomplete/#{car.name}.png" />
  </ui:repeat>
</p:imageSwitch>