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="Carrousel"
                   description="Insérez un carrousel d'images"
                   extensionName="OtTemplating"
        >
            <flux:form.option.group value="fce" />
            <flux:form.option.icon value="EXT:ot_templating/Resources/Public/Icons/opentalent-144x144.png" />

            <flux:field.input name="width" eval="trim" default="600" label="Largeur (en pixels)"/>
            <flux:field.input name="height" eval="trim" default="400" label="Hauteur (en pixels)"/>
            <flux:field.checkbox name="crop" label="Rogner les images trop grandes ?" default="0"/>

            <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', uid: '{record.uid}')}"
                   as="image"
                   iteration="iterator">

                <f:image treatIdAsReference="1"
                         src="{image.id}"
                         title="{image.title}"
                         alt="{image.alternative}"
                         class="be-carousel-img-preview"
                         maxWidth="128"
                         maxHeight="128"
                />

            </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', uid: '{record.uid}')}"
                       as="image"
                       iteration="iterator">
                    <div style="height: {height}px">
                        <f:image treatIdAsReference="1"
                                 src="{image.id}"
                                 title="{image.title}"
                                 alt="{image.alternative}"
                                 class="carousel-img"
                                 width="{width}"
                                 maxHeight="{height}{f:if(condition: crop, then: 'c')}"
                        />
                    </div>
                </f:for>
            </div>
        </div>

    </f:section>

</div>