<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

<div class="section section-hero-slider overflow-auto text-bg-primary">
    <div class="hero-slider splide  position-relative d-flex flex-nowrap" id="splide{data.uid}">
        <div class="splide__track w-100">
            <div class="splide__list">
                <f:for each="{contentHero}" as="contentElement">
                    <div class="splide__slide">
                        <f:cObject
                                typoscriptObjectPath="tt_content.{contentElement.data.CType}"
                                data="{contentElement.data}"
                                table="tt_content"
                        />
                    </div>
                </f:for>
            </div>
        </div>
    </div>
</div>

<f:if condition="{contentHero -> f:count()} > 1">
    <f:asset.css identifier="splidejs" href="EXT:stwm_sitepackage/Resources/Public/Css/splidejs.css"/>
    <f:asset.script identifier="splidejs" src="EXT:stwm_sitepackage/Resources/Public/JavaScript/splide.min.js"/>
    <f:asset.script identifier="splide{data.uid}">
        (() => {
        const elem = document.getElementById('splide{data.uid}');
        const options = {
            type: "fade",
            autoplay: true,
            rewind: true,
        };
        new Splide(elem, options).mount({});
        })()
    </f:asset.script>
</f:if>
