Gardener > Features > Slider > Slider With Thumbnail

How to use

You can follow these steps:

1.Add a HTML module

2.Paste the content codes into the HTML module ( Choose "HTML" mode in HTML Editor ).

3.Edit the content code

4.Finally Save

Content code


<div class="bxslider-thumbnail">
<ul class="bx-thumbnail">
    <li><img alt="" src="/Portals/0/images/bxslider-thumbnail-large01.jpg" /></li>
    <li><img alt="" src="/Portals/0/images/bxslider-thumbnail-large02.jpg" /></li>
    <li><img alt="" src="/Portals/0/images/bxslider-thumbnail-large03.jpg" /></li>
    <li><img alt="" src="/Portals/0/images/bxslider-thumbnail-large04.jpg" /></li>
</ul>
<div id="bx-thumbnail-pager">
<a data-slide-index="0"><img alt="" src="/Portals/0/images/bxslider-thumbnail-small01.jpg" /></a>
<a data-slide-index="1"><img alt="" src="/Portals/0/images/bxslider-thumbnail-small02.jpg" /></a>
<a data-slide-index="2"><img alt="" src="/Portals/0/images/bxslider-thumbnail-small03.jpg" /></a>
<a data-slide-index="3"><img alt="" src="/Portals/0/images/bxslider-thumbnail-small04.jpg" /></a>
</div>
</div>