<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:bk2k="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{files}">

    <f:variable name="imagecols">1</f:variable>
    <f:if condition="{files -> f:count()} > 1">
        <f:variable name="imagecols">{data.imagecols as integer}</f:variable>
    </f:if>
    <f:variable name="columnConfig">{settings.gallery.columns.{imagecols}}</f:variable>
    <bk2k:data.imageVariants as="variants" variants="{variants}" multiplier="{columnConfig.multiplier}" gutters="{columnConfig.gutters}" corrections="{columnConfig.corrections}"/>


    <div id="caraousel-{data.uid}" class="carousel carousel-imageslider slide carousel-fade carousel-fade" data-ride="carousel" data-interval="350000">
        <div class="carousel-inner">
            <f:for each="{files}" as="file" iteration="fileIteration">
                <div class="gallery-item {columnConfig.class}{f:if(condition: '{fileIteration.index} == 0', then: ' carousel-item active', else: ' carousel-item')}">
                    <f:render partial="Media/Type" arguments="{file: file, data: data, settings: settings, variants: variants}"/>
                </div>
            </f:for>
        </div>

        <ol class="carousel-indicators">
            <f:for each="{files}" as="file" iteration="fileIteration">
                <li data-target="#caraousel-{data.uid}" data-slide-to="{fileIteration.index}" class="{f:if(condition: '{fileIteration.index} == 0', then: ' active')}">
                    <f:render partial="Media/Rendering/Thumbnail" arguments="{file: file, data: data, settings: settings, variants: variants, thumbnailWidth:80, thumbnailHeight:60}"/>
                </li>
            </f:for>
        </ol>

        <a class="carousel-control-prev" href="#caraousel-{data.uid}" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#caraousel-{data.uid}" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</f:if>
</html>
