{style}
{literal}
	.slides_container {
        width: {/literal}{$configs.width}{literal}px;
        height: {/literal}{$configs.height}{literal}px;
        padding: 15px;
        background: #f8f8f8;
        border: 1px solid #d1d1d1;
        overflow: hidden;
        position: relative;
	}

	#container {
        width: {/literal}{math equation='x + 32' x=$configs.width}{literal}px;
        height: {/literal}{math equation='x + 60' x=$configs.height}{literal}px;
	    margin: 0 auto;
	    position: relative;
	    z-index: 0;
    }
    
    #slides .next {
        left: {/literal}{math equation='x + 30' x=$configs.width}{literal}px;
    }
    
    .caption {
        width: {/literal}{math equation='x - 40' x=$configs.width}{literal}px;
    }
    
    .slides_control {
        overflow: hidden;
    }
{/literal}
{/style}

<div id="container">
<div id="slides">
	<div class="slides_container">
	{foreach from=$images item='image'}
	    <div>
	        <a href="{if isset($image.dto->href)}{$image.dto->href}{else}javascript://{/if}">
	           <img src="{$image.imageUrl}" width="{$configs.width}" height="{$configs.height}">
	        </a>
	        {if $configs.titles && isset($image.dto->title)}
	        <div class="caption" style="bottom: 0">
	            <p>{$image.dto->title}</p>
	        </div>
	        {/if}
	    </div>
    {/foreach}
    </div>
    {if $configs.navigation}
    <a href="#" class="prev"><img src="{$url}arrow-prev.png" width="24" height="43"></a>
    <a href="#" class="next"><img src="{$url}arrow-next.png" width="24" height="43"></a>
    {/if}
</div>
</div>