ot_typo3/ot_templating/Resources/Private/Templates/Content/Carousel.html

<f:comment><!-- Widget flux par Opentalent: Carousel --></f:comment>
<f:comment><!-- Require: https://kenwheeler.github.io/slick/ --></f:comment>

{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace flux=FluidTYPO3\Flux\ViewHelpers}

<div xmlns="http://www.w3.org/1999/xhtml"
     xmlns:flux="http://fedext.net/ns/flux/ViewHelpers"
     xmlns:v="http://fedext.net/ns/vhs/ViewHelpers"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">

    <f:layout name="{settings.template}/CustomContent"/>

    <f:section name="Configuration">
        <flux:form id="Carousel"
                   label="LLL:EXT:ot_templating/Resources/Private/Language/locallang.xlf:insert_carousel"
                   description="LLL:EXT:ot_templating/Resources/Private/Language/locallang.xlf:insert_carousel"
                   extensionName="OtTemplating"
        >
            <flux:form.option.group value="ot_widgets" />
            <flux:form.option.icon value="EXT:ot_templating/Resources/Public/Icons/opentalent-144x144.png" />

            <flux:field.input name="width" eval="trim" default="600" label="LLL:EXT:ot_templating/Resources/Private/Language/locallang.xlf:width_in_pixels"/>
            <flux:field.input name="height" eval="trim" default="400" label="LLL:EXT:ot_templating/Resources/Private/Language/locallang.xlf:height_in_pixels"/>

            <flux:field.inline.fal name="images" minItems="2" maxItems="24"/>

        </flux:form>
    </f:section>

    <f:section name="Preview">
        <p>Carrousel</p>

        <div class="be-carousel-preview">
            <f:for each="{v:content.resources.fal(field: 'images', record: '{record}')}"
                   as="image"
                   iteration="iterator">
                <f:if condition="{v:variable.pregMatch(pattern: '/.*(?:jpe?g|gif|png)$/', subject: image.url)}">
                    <f:image treatIdAsReference="1"
                             src="{image.id}"
                             title="{image.title}"
                             alt="{image.alternative}"
                             class="be-carousel-img-preview"
                             maxWidth="128"
                             maxHeight="128"
                    />
                </f:if>
            </f:for>
        </div>
    </f:section>

    <f:section name="Main">

        <div class="center-carousel">
            <div class="carousel" style="max-width:{width}px; max-height:{height}px;">
                <f:for each="{v:content.resources.fal(field: 'images', record: '{record}')}"
                       as="image"
                       iteration="iterator">
                    <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;height:100%;width:{width}px;height:{height}px;">
                        <f:image treatIdAsReference="1"
                                 src="{image.id}"
                                 title="{image.title}"
                                 alt="{image.alternative}"
                                 class="carousel-img"
                                 height="{height}"
                                 style="max-width:{width}px;max-height:{height}px;width:auto;height:auto;"
                        />
                    </div>
                </f:for>
            </div>
        </div>

    </f:section>

</div>