<div id="sequence" class="jumbotron">
    <f:spaceless>
        <f:if condition="{data.tx_mask_hero_slides}">
            <div class="seq-canvas">
                <f:for each="{data.tx_mask_hero_slides}" as="data_item" iteration="slide">
                    <f:cObject typoscriptObjectPath="lib.tx_mask.content">{data_item.uid}</f:cObject>
                </f:for>
            </div>
            <f:if condition="{data.tx_mask_hero_slides -> f:count()} > 1">
                <div class="seq-prev"><i class="icon-left-open"></i></div>
                <div class="seq-next"><i class="icon-right-open"></i></div>
            </f:if>
            <f:if condition="{data.tx_mask_hero_slides -> f:count()} > 1">
                <ul class="seq-pagination">
                    <f:for each="{data.tx_mask_hero_slides}" as="data_item" iteration="slide">
                        <li></li>
                    </f:for>
                </ul>
            </f:if>
        </f:if>
    </f:spaceless>
</div>

<f:asset.script identifier="hammer" src="EXT:seragwiessner_sitepackage/Resources/Public/JavaScript/hammer.min.js"/>
<f:asset.script identifier="imagesloaded" src="EXT:seragwiessner_sitepackage/Resources/Public/JavaScript/imagesloaded.pkgd.js"/>
<f:asset.script identifier="sequence" src="EXT:seragwiessner_sitepackage/Resources/Public/JavaScript/sequence.min.js"/>
<f:asset.script identifier="sequenceInit">
var sequenceElement = document.getElementById("sequence");
var options = {
    animateCanvas: false,
    startingStepAnimatesIn: true,
    autoPlay: true,
    autoPlayInterval: 5000,
    preloader: true,
    hideStepsUntilPreloaded: true
}
var mySequence = sequence(sequenceElement, options);
</f:asset.script>
