<pre name="code" class="xml">
 

 &lt;f:view contentType="text/html" >

 &lt;p:carousel vertical="true" value="#{carouselDemo.content}" 
 var="carousel"
 circular="true" 
 autoPlayInterval="10000" 
 rows="1"
 itemStyle="border:0px;height:280px;width:300px;" >

 &lt;h:outputLink value="#{carousel.item1}" >
 &lt;h:panelGrid >
 &lt;h:outputText escape="false"
 style="font-size:22px;font-weight: bold;"
 value="#{carousel.item2}" />

 &lt;h:outputText escape="false"
 style="font-size:12px;font-weight: bold;"
 value="#{carousel.item3}" />
 &lt;/h:panelGrid>
 &lt;/h:outputLink >

 &lt;/p:carousel>

 &lt;/f:view>
 
 
 
</pre>



There is nothing special about the carousel above, except that we use a backing bean for the content. As shown above we use a 

JSF standard output link component with a couple JSF text components. Important points to consider are the f:view 

contentType, itemStyle and value attributes of the carousel itself. You may want to vary the values of 

the rest of the attributes. 


You can add image component to our content if desired.



Below is the backing bean "carouselDemo" used above.


 

<pre name="code" class="java">
 

 package demo;

 import java.util.ArrayList;
 import java.util.List;
 import javax.annotation.PostConstruct;
 import javax.faces.bean.ManagedBean;
 import javax.faces.bean.RequestScoped;


 @ManagedBean
 @RequestScoped
 public class CarouselDemo {

 
 public CarouselDemo() {
 }
 
 private List content;

 @PostConstruct
 void init() {

 content = new ArrayList();

 CaroItems item1 = new CaroItems();
 item1.setItem1("http://www.linuxtoday.com");
 item1.setItem2("Test3");
 item1.setItem3("Install Lubuntu Software "
 + "Center (Lightweight "
 + "USC Alternative For Lubuntu 11.10)");

 content.add(item1);

 CaroItems item2 = new CaroItems();
 item2.setItem1("http://www.pcworld.com");
 item2.setItem2("Content");
 item2.setItem3("How Wintel is Crumblinhg; Analysis: "
 + "Intel and Microsoft, "
 + "once best friends, have become "
 + "grudging "frenemies."");

 content.add(item2);

 // Add more items as required. 

 }

 public List getContent() {
 return content;
 }

 public class CaroItems {

 private String item1;
 private String item2;
 private String item3;

 public String getItem1() {
 return item1;
 }

 public void setItem1(String s) {
 item1 = s;
 }

 public String getItem2() {
 return item2;
 }

 public void setItem2(String s) {
 item2 = s;
 }

 public String getItem3() {
 return item3;
 }

 public void setItem3(String s) {
 item3 = s;
 }
 }
 }
 
 

</pre>




The carousel is some kind of a data component. Its value attribute expects a list of objects represented here by our 

variable content containing objects of type CaroItems which is an inner class to our main backing bean CarouselDemo. 

Please see your documentation for more information about the carousel component.




Good luck.

Content slide show using PrimeFaces carousel component