<div id="sks-screenshot-carousel" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators indicator-padding">
        {assign var="array" value=$sksscreens|count}
        {for $counter=0 to $array}
            <li data-target="#sks-screenshot-carousel" data-slide-to="{$counter}"
                {if $counter == 0}class="active"{/if}></li>
        {/for}
    </ol>

    <div class="carousel-inner sks-screen-res" role="listbox">
        {foreach item=pic from=$sksscreens name=listScreenshots}
            <div class="item {if $smarty.foreach.listScreenshots.iteration == 1}active{/if}">
                <img src="{$pic}" alt="SKS Screen {$smarty.foreach.listScreenshots.iteration}">
            </div>
        {/foreach}
    </div>
    <a class="left carousel-control" href="#sks-screenshot-carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#sks-screenshot-carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>