Pessoal,
a exibição do carousel está bem desformatada e longe do showcase do site do primafaces: https://www.primefaces.org/showcase/ui/data/carousel.xhtml
O navegador está com uma barra de rolagem enorme na horizontal pela página ter ficado muito larga.
Segue a página carousel.xhtml:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<ui:composition template="_template.xhtml">
<ui:define name="titulo">
<p:outputPanel>Carousel</p:outputPanel>
</ui:define>
<ui:define name="conteudo">
<h:form id="carousel">
<p:messages id="messages" globalOnly="true" />
<p:fieldset legend="Login">
<p:panelGrid columns="3">
<p:carousel value="#{livroBean.livros}" headerText="Livros - Responsivo" var="livro" responsive="true">
<p:panelGrid columns="2" style="width:100%;margin:10px 0px" columnClasses="label,value" layout="grid" styleClass="ui-panelgrid-blank">
<f:facet name="header">
#{livro.titulo}
</f:facet>
<h:outputText value="Id:" />
<h:outputText value="#{livro.id}" />
<h:outputText value="ISBN:" />
<h:outputText value="#{livro.isbn}" />
<h:outputText value="Preço" />
<h:outputText value="R$ #{livro.preco}" />
</p:panelGrid>
<f:facet name="footer">
Total de livros: #{fn:length(livroBean.livros)}
</f:facet>
</p:carousel>
</p:panelGrid>
</p:fieldset>
</h:form>
</ui:define>
</ui:composition>
</html>
