ot_typo3/ot_templating/Resources/Private/Partials/Modern/Carousel.html

{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace ot=Opentalent\OtTemplating\ViewHelpers}

<f:comment><!--
    -- Resources.fal ViewHelper --
    Voir: https://fluidtypo3.org/viewhelpers/vhs/master/Page/Resources/FalViewHelper.html
--></f:comment>

<section id="main-carousel" class="rev-slider">
    <div id="rev_slider_268_1_wrapper"
         class="rev_slider_wrapper fullwidthbanner-container"
         data-alias="webster-slider-2"
         data-source="gallery"
         style="margin:0px auto;background:transparent;padding:0px;margin-top:0px;margin-bottom:0px;">

        <v:page.resources.fal table="pages"
                              field="media"
                              uid="{page.uid}"
                              as="images"
                              slide="-1"
                              limit="10"  >

            <f:if condition="{ot:utilities.count(array: images)} <= 1">
                <style>
                    .tparrows {
                        display: none !important;
                    }
                </style>
            </f:if>

            <f:comment><!-- START REVOLUTION SLIDER 5.4.6.3 fullwidth mode --></f:comment>
            <div id="rev_slider_268_1"
                 class="rev_slider"
                 style="display:none;"
                 data-version="5.4.6.3">

                <ul>
                    <f:for each="{images}" as="image">
                        <f:if condition="{v:variable.pregMatch(pattern: '/.*(?:jpe?g|gif|png)$/', subject: image.url)}">
                            <li data-index="rs-757"
                                data-transition="fade"
                                data-slotamount="default"
                                data-hideafterloop="0"
                                data-hideslideonmobile="off"
                                data-easein="default"
                                data-easeout="default"
                                data-masterspeed="1000"
                                data-thumb=""
                                data-rotate="0"  data-saveperformance="off"
                                data-title="Slide"
                                data-param1=""
                                data-param2=""
                                data-param3=""
                                data-param4=""
                                data-param5=""
                                data-param6=""
                                data-param7=""
                                data-param8=""
                                data-param9=""
                                data-param10=""
                                data-description="">

                                <ot:imageP src="{image.url}"
                                     alt="{image.alternative}"
                                     class="rev-slidebg"
                                     height="500c"
                                     data="{bgposition: 'center center', bgfit: 'cover', bgrepeat: 'no-repeat', no-retina: ''}"
                                />
                            </li>
                        </f:if>
                    </f:for>
                </ul>
            </div>
        </v:page.resources.fal>
    </div>
</section>