Time for action – creating Carousel using tabs

Let us see how we can create a Carousel component with the nested <p:tab> components, with each <p:tab> displaying one book's details.

Create a <p:carousel> component with nested <p:tab> components:

<p:carousel id="tabsCarousel" numVisible="1" itemStyle="height:220px;width:600px;" effect="easeInStrong"
  headerText="Latest Books">

  <p:tab title="PrimeFaces Beginners Guide">  
     <h:panelGrid columns="2" cellpadding="10">  
      <p:graphicImage value="/resources/images/books/PFBG_Raw.jpg" width="150px" height="200px;"/>  
      <h:outputText  
        value="Description about PrimeFaces Beginners Guide." />  
    </h:panelGrid>  
  </p:tab>

  <p:tab title="PrimeFaces Cookbook">
    <h:panelGrid columns="2" cellpadding...