{strip}

{* A simple Smarty array for our slideshow *}
{$slides = []}

{$slides.0.heading = 'Power for professionals'}
{$slides.0.subheading = 'Simplicity for end Users'}
{$slides.0.image = 'palm-logo.png'}

{$slides.1.heading = 'Faster &amp; Easier'}
{$slides.1.subheading = 'Website management'}
{$slides.1.image = 'mate-zimple.png'}

{$slides.2.heading = 'Flexible &amp; Powerful'}
{$slides.2.subheading = 'Manage your Website anywhere and anytime'}
{$slides.2.image = 'mobile-devices-scene.png'}

{$slides.3.heading = 'Secure &amp; Robust'}
{$slides.3.subheading = 'Take control of your application'}
{$slides.3.image = 'browser-scene.png'}

{* Markup *}
<section class='banner row noprint' id='sx-slides' role='banner'>
    <ul class="sequence-canvas">
        {foreach $slides as $slide}
        <li{if $slide@first} class='animate-in'{/if}>
            {if !empty($slide.heading)}<h2 class='title'>{$slide.heading}</h2>{/if}
            {if !empty($slide.subheading)}<h3 class='subtitle'>{$slide.subheading}</h3>{/if}
            {if !empty($slide.image)}<img class='image' src='{uploads_url}/simplex/teaser/{$slide.image}' alt='{$slide.heading|cms_escape:'htmlall'}' />{/if}
        </li>
        {/foreach}
    </ul>
</section>

{/strip}