• 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

Galleria AutoPlay

AutoPlay mode is used to implement slideshows.

Galleria Tag Documentation

Galleria is a content gallery component.

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.
activeIndex int false 0 Index of the first item.
autoPlay boolean false false Enables autoplay for the gallery.
changeItemOnIndicatorHover boolean false false Whether to change item on indicator hover.
circular boolean false false Defines if scrolling would be infinite.
closeIcon String false Close icon on fullscreen mode.
dynamic boolean false false When enabled, only active tab contents are rendered.
fullScreen boolean false false Whether to display the component on fullscreen.
indicatorsPosition String false bottom Position of indicators. Valid values are "bottom", "top", "left" and "right".
numVisible int false 3 Number of items per page.
offset int false 0 Index of the first item to iterate.
prependId boolean false true Whether to prepend the component id to its children.
responsiveOptions List false A list of breakpoint ResponsiveOption for responsive design.
showCaption boolean false false Whether to display caption container.
showIndicators boolean false false Whether to display indicator container.
showIndicatorsOnItem boolean false false When enabled, indicator container is displayed on item container.
showItemNavigators boolean false false Whether to display item navigators..
showItemNavigatorsOnHover boolean false false Whether to display item navigators on hover.
showThumbnailNavigators boolean false true Whether to display thumbnail navigators.
showThumbnails boolean false true Whether to display thumbnail container.
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.
tabindex String false 0 Specifies the tab order of element in tab navigation.
thumbnailsPosition String false bottom Position of thumbnails. Valid values are "bottom", "top", "left" and "right".
transitionInterval int false 4000 Time in milliseconds between item transitions.
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 450px Height of the viewport in vertical layout.
Loading...
Tag DocumentationNew DocumentationNew Documentation JSDoc Basic Programmatic Indicator Thumbnail Navigator Responsive FullScreen AutoPlay Caption Dynamic
  • Description for Image 1
  • Description for Image 2
  • Description for Image 3
  • Description for Image 4
  • Description for Image 5
  • Description for Image 6
  • Description for Image 7
  • Description for Image 8
  • Description for Image 9
  • Description for Image 10
  • Description for Image 11
  • Description for Image 12
  • Description for Image 13
  • Description for Image 14
  • Description for Image 15
Description for Image 1
Description for Image 2
Description for Image 3
Description for Image 4
Description for Image 5
Description for Image 6
Description for Image 7
Description for Image 8
Description for Image 9
Description for Image 10
Description for Image 11
Description for Image 12
Description for Image 13
Description for Image 14
Description for Image 15

Usage


<div class="card">
    <p:galleria value="#{galleriaView.photos}" var="photo" numVisible="5" responsiveOptions="#{galleriaView.responsiveOptions1}" 
                circular="true" autoPlay="true" transitionInterval="2000" style="max-width: 640px">
        <p:graphicImage name="#{photo.itemImageSrc}" alt="#{photo.alt}" style="width: 100%; display: block;" />
        <f:facet name="thumbnail">
            <p:graphicImage name="#{photo.thumbnailImageSrc}" alt="#{photo.alt}" style="display: block;" />
        </f:facet>
    </p:galleria>
</div>