ImageSwitch

<div class="card">
    <h5 style="margin-top:0">Manual</h5>
    <p:commandButton type="button" onclick="PF('switcher').previous()"
                     icon="pi pi-chevron-left" id="prev" styleClass="mr-2 mb-3" />
    <p:commandButton type="button" onclick="PF('switcher').next()"
                     icon="pi pi-chevron-right" id="next" styleClass="mr-2 mb-3" />

    <p:imageSwitch effect="wipe" widgetVar="switcher" id="manuelSwitcher"
                   slideshowAuto="false">
        <ui:repeat value="#{imagesView.images}" var="image" id="manuelSwitcherImages">
            <p:graphicImage name="/demo/images/nature/#{image}" id="image"/>
        </ui:repeat>
    </p:imageSwitch>
</div>

<div class="card">
    <h5>Fade</h5>
    <p:imageSwitch effect="fade" id="fadeEffect">
        <ui:repeat value="#{imagesView.images}" var="image" id="fadeEffectImages">
            <p:graphicImage name="/demo/images/nature/#{image}" id="image2"/>
        </ui:repeat>
    </p:imageSwitch>
</div>

<div class="card">
    <h5>Zoom</h5>
    <p:imageSwitch effect="zoom">
        <ui:repeat value="#{imagesView.images}" var="image">
            <p:graphicImage name="/demo/images/nature/#{image}"/>
        </ui:repeat>
    </p:imageSwitch>
</div>

<div class="card">
    <h5>TurnDown</h5>
    <p:imageSwitch effect="turnDown">
        <ui:repeat value="#{imagesView.images}" var="image">
            <p:graphicImage name="/demo/images/nature/#{image}"/>
        </ui:repeat>
    </p:imageSwitch>
</div>

<div class="card">
    <h5>Shuffle</h5>
    <p:imageSwitch effect="shuffle">
        <ui:repeat value="#{imagesView.images}" var="image">
            <p:graphicImage name="/demo/images/nature/#{image}"/>
        </ui:repeat>
    </p:imageSwitch>
</div>

<div class="card">
    <h5>Dialog Integration</h5>
    <p:commandButton type="button" value="Show" onclick="PF('dlg').show()" icon="pi pi-home"/>

    <p:dialog header="Images" widgetVar="dlg" modal="true"
              draggable="false" resizable="false" showEffect="fade" hideEffect="fade">

        <p:imageSwitch effect="fade">
            <ui:repeat value="#{imagesView.images}" var="image">
                <p:graphicImage name="/demo/images/nature/#{image}"/>
            </ui:repeat>
        </p:imageSwitch>
    </p:dialog>
</div>