{if !empty($item->slides)}
    {* mobile version: shown for all at start *}
    <div id="slide-container-mobile" class="slides_container">
        {assign var="firstSlide" value=`$item->slides[0]`}
        <div class="slide_items_container">
            <div class="slide_item">
                {if $firstSlide.type == 'html'}
                    <div class="slide_html">
                        <img src="{$firstSlide.backgroundImage}" alt="{$firstSlide.title|strip_tags|htmlspecialchars}" title="{$firstSlide.title|strip_tags|htmlspecialchars}" />
                        <div class="slide_text tac">
                            <h2 title="{$firstSlide.title|strip_tags|htmlspecialchars}">{$firstSlide.title|strip_tags|htmlspecialchars|truncate:$item->maxTextTitleLength}</h2>
                            {$firstSlide.html|strip_tags|truncate:130|htmlspecialchars}
                            {if $firstSlide.linkType != 'none'} <a href="{$firstSlide.url|htmlspecialchars}"{if $firstSlide.linkType == 'url'} target="{$firstSlide.url|target}"{/if}>{$firstSlide.linkText|htmlspecialchars} &raquo;</a>{/if}
                        </div>
                    </div>
                {else}
                    <img src="{$firstSlide.image}" alt="{$firstSlide.title|strip_tags|htmlspecialchars}" title="{$firstSlide.title|strip_tags|htmlspecialchars}" />
                {/if}
            </div>
        </div>
    </div>

    {* desktop version: hidden at start; *}
    <div id="slides-container-{$item->idItem}" class="slides_container hidden">
        {assign var="firstSlide" value=`$item->slides[0]`}
        <div class="slide_preload slide_items_container">
            <div class="slide_item">
                {if $firstSlide.type == 'html'}
                    <div class="slide_html">
                        <img src="{$firstSlide.backgroundImage}" alt="{$firstSlide.title|strip_tags|htmlspecialchars}" title="{$firstSlide.title|strip_tags|htmlspecialchars}" />
                        <div class="slide_text tac">
                            <h2 title="{$firstSlide.title|strip_tags|htmlspecialchars}">{$firstSlide.title|strip_tags|htmlspecialchars|truncate:$item->maxTextTitleLength}</h2>
                            {$firstSlide.html|strip_tags|truncate:130|htmlspecialchars}
                            {if $firstSlide.linkType != 'none'} <a href="{$firstSlide.url|htmlspecialchars}"{if $firstSlide.linkType == 'url'} target="{$firstSlide.url|target}"{/if}>{$firstSlide.linkText|htmlspecialchars} &raquo;</a>{/if}
                        </div>
                    </div>
                {else}
                    <img src="{$firstSlide.image}" alt="{$firstSlide.title|strip_tags|htmlspecialchars}" title="{$firstSlide.title|strip_tags|htmlspecialchars}" />
                {/if}
            </div>
        </div>
    </div>
    {* placed the empty slides-toolbar-container to prevent page trembles *}
    {if 'y' == $item->enableButtons || 'y' == $item->enablePaginator}
        <div id="slides-toolbar-container-{$item->idItem}" style="height:20px;"></div>
    {/if}
{/if}