• Settings
    • Locale
    • Change the locale of the datepicker, schedule and client side validation messages.

      Language
      English
      English
      English
      French
      German
      German
      German
      Italian
      Korean
      Spanish
      Catalan
      Dutch
      Portuguese
      Portuguese
      Arabic
      Arabic
      Bulgarian
      Bangla
      Bosnian
      Czech
      Greek
      Estonian
      Persian
      Finnish
      Danish
      Hindi
      Indonesian
      Icelandic
      Croatian
      Japanese
      Hungarian
      Hebrew
      Georgian
      Central Kurdish
      Khmer
      Kyrgyz
      Kazakh
      Lithuanian
      Latvian
      Malay
      Norwegian
      Polish
      Romanian
      Russian
      Slovak
      Slovenian
      Serbian
      Serbian
      Swedish
      Thai
      Turkish
      Ukrainian
      Uzbek
      Vietnamese
      Chinese
      Chinese
  • Resources

Carousel

Carousel displays data using a slide effect.

Carousel Tag Documentation

Carousel is a content slider featuring various customization options.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar String false generated ('widget_' + componentClientId) Name of the client side widget.
autoplayInterval int false 0 Time in milliseconds to scroll items automatically, whereas 0 means disabled.
circular boolean false false Defines if scrolling would be infinite.
containerStyleClass String false Style class of the carousel container.
contentStyleClass String false Style class of the carousel content.
dynamic boolean false false When enabled, only active tab contents are rendered.
footerText String false Text content of the footer.
headerText String false Text content of the header.
indicatorsContentStyleClass String false Style class of the carousel indicators content.
numScroll int false 1 Number of items to scroll.
numVisible int false 1 Number of items per page.
offset int false 0 Index of the first item to iterate.
onPageChange String false Client side callback to execute when a page is changed.
orientation String false horizontal Specifies the layout of the component, valid values are "horizontal" and "vertical".
page int false 0 Index of the first page.
paginator boolean false true When enabled, displays paginator.
prependId boolean false true Whether to prepend the component id to its children.
responsiveOptions List false A list of breakpoint ResponsiveOption for responsive design.
size int false -1 Maximum number of items to iterate, whereas -1 means 'all items'.
step int false 1 Step size for iteration.
style String false Inline style of the component.
styleClass String false Style class of the component.
touchable Boolean false Enable touch if supported by device. NULL uses global default or primefaces.TOUCHABLE. Default: globally enabled.
value Object false Value binding expression to a data model.
var String false Name of the request-scoped variable used to reference each data object in the iteration.
varStatus String false Name of the request-scoped variable used to expose the iteration status.
verticalViewPortHeight String false 300px Height of the viewport in vertical layout.
Loading...
Tag DocumentationNew DocumentationNew Documentation JSDoc

Usage


<style>
    .product-item .product-item-content {
        border: 1px solid var(--p-content-border-color);
        border-radius: 3px;
        margin: .3rem;
        text-align: center;
        padding: 2rem 0;
    }

    .product-item .product-image {
        width: 50%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
    }
</style>


<h:form id="form">

    <div class="card">
        <p:carousel value="#{carouselView.products}" var="product" numVisible="3" numScroll="3"
                    responsiveOptions="#{carouselView.responsiveOptions}">
            <f:facet name="header">
                <h5>Basic</h5>
            </f:facet>
            <div class="product-item">
                <div class="product-item-content">
                    <div class="mb-3">
                        <p:graphicImage name="demo/images/product/#{product.image}" styleClass="product-image"/>
                    </div>
                    <div>
                        <h4 class="mb-1">#{product.name}</h4>
                        <h6 class="mt-0 mb-3">
                            <h:outputText value="#{product.price}">
                                <f:convertNumber type="currency" pattern="¤#0" currencySymbol="$" />
                            </h:outputText>
                        </h6>
                        <span class="product-badge status-#{product.inventoryStatus.name().toLowerCase()}">#{product.inventoryStatus.text}</span>
                        <div class="mt-5">
                            <p:commandButton type="button" icon="pi pi-search" styleClass="rounded-button mr-2" />
                            <p:commandButton type="button" icon="pi pi-star" styleClass="ui-button-success rounded-button mr-2" />
                            <p:commandButton type="button" icon="pi pi-cog" styleClass="ui-button-help rounded-button" />
                        </div>
                    </div>
                </div>
            </div>
        </p:carousel>
    </div>

    <div class="card">
        <p:carousel value="#{carouselView.products}" var="product" circular="true" autoplayInterval="3000"
                    responsiveOptions="#{carouselView.responsiveOptions}" numVisible="3" numScroll="1">
            <f:facet name="header">
                <h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
            </f:facet>

            <div class="product-item">
                <div class="product-item-content">
                    <div class="mb-3">
                        <p:graphicImage name="demo/images/product/#{product.image}" styleClass="product-image"/>
                    </div>
                    <div>
                        <h4 class="mb-1">#{product.name}</h4>
                        <h6 class="mt-0 mb-3">
                            <h:outputText value="#{product.price}">
                                <f:convertNumber type="currency" pattern="¤#0" currencySymbol="$" />
                            </h:outputText>
                        </h6>
                        <span class="product-badge status-#{product.inventoryStatus.name().toLowerCase()}">#{product.inventoryStatus.text}</span>
                        <div class="mt-5">
                            <p:commandButton type="button" icon="pi pi-search" styleClass="rounded-button mr-2" />
                            <p:commandButton type="button" icon="pi pi-star" styleClass="ui-button-success rounded-button mr-2" />
                            <p:commandButton type="button" icon="pi pi-cog" styleClass="ui-button-help rounded-button" />
                        </div>
                    </div>
                </div>
            </div>
        </p:carousel>
    </div>

    <div class="card">
        <p:carousel value="#{carouselView.products}" var="product" orientation="vertical"
                    verticalViewPortHeight="352px" style="max-width: 400px;margin-top: 2em;">
            <f:facet name="header">
                <h5>Vertical</h5>
            </f:facet>
            <div class="product-item">
                <div class="product-item-content">
                    <div class="mb-3">
                        <p:graphicImage name="demo/images/product/#{product.image}" styleClass="product-image"/>
                    </div>
                    <div>
                        <h4 class="mb-1">#{product.name}</h4>
                        <h6 class="mt-0 mb-3">
                            <h:outputText value="#{product.price}">
                                <f:convertNumber type="currency" pattern="¤#0" currencySymbol="$" />
                            </h:outputText>
                        </h6>
                        <span class="product-badge status-#{product.inventoryStatus.name().toLowerCase()}">#{product.inventoryStatus.text}</span>
                        <div class="mt-5">
                            <p:commandButton type="button" icon="pi pi-search" styleClass="rounded-button mr-2" />
                            <p:commandButton type="button" icon="pi pi-star" styleClass="ui-button-success rounded-button mr-2" />
                            <p:commandButton type="button" icon="pi pi-cog" styleClass="ui-button-help rounded-button" />
                        </div>
                    </div>
                </div>
            </div>
        </p:carousel>
    </div>

    <div class="card">
        <p:carousel circular="true" paginator="false">
            <f:facet name="header">
                <h5>Tabs</h5>
            </f:facet>
            <p:tab>
                <p class="m-0 p-3">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </p:tab>
            <p:tab>
                <p class="m-0 p-3">
                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
                    illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
                    odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
                </p>
            </p:tab>
            <p:tab>
                <p class="m-0 p-3">
                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
                    et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
                    Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
                </p>
            </p:tab>
        </p:carousel>
    </div>
</h:form>