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>

<ot:carousel.images as="images"
                    limit="5"
                    countAs="count">

    <f:if condition="{count} > 0">

        <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;">

                <f:if condition="{count} <= 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">
                            <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:for>
                    </ul>
                </div>
            </div>
        </section>
    </f:if>
</ot:carousel.images>