{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
    <header class="control-header">
        <h1>{$this->getAttribute('frontendTitle')}</h1>
    </header>
{/if}

{if $this->getAttribute('content') != ""}
    <div class="control-content default-content">
        {$this->getAttribute('content')}
    </div>
{/if}

<div class="basic-slider-wrapper {if $imgLeft} basic-slider__imageLeft {/if}">
    <div class="basic-slider-content" style="align-items: {$textPosition};">
        <div class="basic-slider-content-container default-content">
            {$sliderContent}
        </div>
    </div>

    <div class="basic-slider-image-wrapper">
        <ul class="basic-slider-images">
            {assign var=showFirstImage value=true}
            {foreach from=$images item=Image}
                <li data-image="{image image=$Image onlysrc=1 width="$maxImageWidth"}">
                    {if $showFirstImage}
                        {image image=$Image width="$maxImageWidth"}
                        {assign var=showFirstImage value=false}
                    {/if}
                </li>
            {/foreach}
        </ul>

        {if $dotsNav}
        <ul class="basic-slider-dots">
            {foreach from=$images item=Image key=key}

                <li class="basic-slider-dot {if $key===0}active{/if}"></li>

            {/foreach}
        </ul>
        {/if}

    </div>
</div>