How to add slider indicators in PrestaShop 1.7

slider bullets prestashop

While writting this post there are no slider indicators (bullets) in standard PrestaShop slider module (imageslider, 1.7.3). In this tutorial we will show you how to add some.

First of all open file themes/THEME_YOU_USE/modules/ps_imageslider/views/templates/hook/slider.tpl (replace THEME_YOU_USE with a name of themplate that you are using).

Then add following code just before ending /ul

    <ol class="carousel-indicators">
        {for $slidesCount=0 to ($homeslider.slides|@count)-1}
            <li data-target="#carousel" data-slide-to="{$slidesCount}"{if $slidesCount===0} class="active"{/if}></li>
        {/for}
    </ol>

If you use bootstrap styles, an ol marker with carousel-indicators class, should already be styled.