<div class="quiqqer-bricks-promoslider-wallpaper-container">
    {strip}
    <ul class="hide-on-mobile">
        {foreach $desktopSlides as $key => $slide}
        <li data-image="{image image=$slide.image onlysrc=1}" data-href="{$slide.url}">
            {assign var=extraClass value=""}

            {if isset($slide.pos) && $slide.pos == 'quiqqer-bricks-promoslider-slide-right'}
            {assign var=extraClass value=" quiqqer-bricks-promoslider-wallpaper-text__right"}
            {/if}

            <div class="quiqqer-bricks-promoslider-wallpaper-image" style="display: none">&nbsp;</div>

            {if $slide.title != '' || $slide.text != ''}
            <div class="grid-container">
                <div class="quiqqer-bricks-promoslider-wallpaper-text{$extraClass}">
                    {if $Utils->isImage($slide.title) || $slide.title != ''}
                    <header>
                        {if $Utils->isImage($slide.title)}
                        {image image=$slide.title}
                        {else}
                        {$slide.title}
                        {/if}
                    </header>
                    {/if}

                    {if $slide.text != ''}
                    <div class="quiqqer-bricks-promoslider-wallpaper-text-description">
                        {$slide.text}
                    </div>
                    {/if}
                </div>
            </div>
            {/if}

            &nbsp;
        </li>
        {/foreach}
    </ul>
    {/strip}

    {strip}
    <ul class="hide-on-desktop">
        {foreach $mobileSlides as $key => $slide}
        <li data-image="{image image=$slide.image onlysrc=1}" data-href="{$slide.url}">
            {assign var=extraClass value=""}

            {if isset($slide.pos) && $slide.pos == 'quiqqer-bricks-promoslider-slide-right'}
            {assign var=extraClass value=" quiqqer-bricks-promoslider-wallpaper-text__right"}
            {/if}

            <div class="quiqqer-bricks-promoslider-wallpaper-image" style="display: none">&nbsp;</div>

            {if $slide.title != '' || $slide.text != ''}
            <div class="grid-container">
                <div class="quiqqer-bricks-promoslider-wallpaper-text{$extraClass}">
                    {if $Utils->isImage($slide.title) || $slide.title != ''}
                    <header>
                        {if $Utils->isImage($slide.title)}
                        {image image=$slide.title}
                        {else}
                        {$slide.title}
                        {/if}
                    </header>
                    {/if}

                    {if $slide.text != ''}
                    <div class="quiqqer-bricks-promoslider-wallpaper-text-description">
                        {$slide.text}
                    </div>
                    {/if}
                </div>
            </div>
            {/if}

            &nbsp;
        </li>
        {/foreach}
    </ul>
    {/strip}
</div>
<div class="quiqqer-bricks-promoslider-wallpaper-dots"></div>

{if count($desktopSlides) > 1 && $this->getAttribute('showarrows')}
<div class="quiqqer-bricks-promoslider-wallpaper-prev hide-on-mobile">
    <span class="fa fa-chevron-left"></span>
</div>
<div class="quiqqer-bricks-promoslider-wallpaper-next hide-on-mobile">
    <span class="fa fa-chevron-right"></span>
</div>
{/if}