Product Detail Slider

[ondrejmoldan]

Hello, I am creating product.tpl and I wanna use Bootstrap Carousel Slider (http://www.w3schools.com/bootstrap/bootstrap_carousel.asp) for images of products. But I need your advice. I am newbie. 

<div id="product-slider" class="carousel slide" data-ride="carousel">
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">
                                {if isset($images)}
                                    {foreach from=$images item=image name=thumbnails}
                                        {assign var=imageIds value="`$product->id`-`$image.id_image`"}
                                        {if !empty($image.legend)}
                                            {assign var=imageTitle value=$image.legend|escape:'html':'UTF-8'}
                                        {else}
                                            {assign var=imageTitle value=$product->name|escape:'html':'UTF-8'}
                                        {/if}
                                        <div class="item">
                                            <img src="{$link->getImageLink($product->link_rewrite, $imageIds, 'large')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}"/>
                                        </div>
                                    {/foreach}
                                {/if}
                            </div> <!-- end of wrapper slides -->
                            <div class="row">
                                <div class="col-xs-5">
                                    <a class="pull-right" href="#product-slider" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                </div>
                                <div class="col-xs-2">
                                    <!-- Indicators -->

                                    <ol class="carousel-indicators">
                                        {if isset($images)}
                                            {for $order=0 to count($images)}
                                                {assign var=imageIds value="`$product->id`-`$image.id_image`"}
                                                <li data-target="#product-slider" data-slide-to="{$order}" class="{if $smarty.foreach.thumbnails.first}active{/if}"></li>                         
                                                {/for}
                                            {/if}
                                    </ol>
                                </div>
                                <div class="col-xs-5">
                                    <a class="pull-left" href="#product-slider" role="button" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>
                            </div>
                        </div>

But images are not showing. HTML is generated, but nothing is showing. I am not sure if it is correct, because its my first experience with smarty and creating theme. So I am sorry.

How can I do it? Is it OK? What about showing images of actual color combination?