创建一个包含3个图像的垂直缩略图

Question

我需要帮助创建一个垂直缩略图，其上显示三个图像与prev。和下一个按钮显示其他图像。这些图像从数据库循环。下面的图片是我想要的预览。比如我有5张图片，我的页面应显示第1张第2张和第3张图片。然后通过单击下一步按钮，它应隐藏第一个图像并仅显示第二，第三和第四图像。任何帮助将不胜感激。

到目前为止，这是我所完成的。

我只是使用css＆＃34; overflow：hidden＆＃34;隐藏额外的图像。我不知道如何添加上一个和下一个按钮来启动它们。

这是我的一些代码：

            {foreach from=$images item=i name=images}
            {if $smarty.foreach.images.iteration <= 16 }
              <div class="thumbnail col-md-12 col-sm-12 col-xs-12"><a href="{$i.image_url|amp}" thumb="{$i.image_url|amp}" data-fancybox-group="gallery" class="fancybox" {if $smarty.foreach.images.iteration eq 1} id="first_icon"{/if} onclick="return {if $config.Detailed_Product_Images.is_jqzoom eq 'Y'}false{else}dicon_click({$smarty.foreach.images.iteration}, '{$config.Detailed_Product_Images.det_slideshow_delay}', '{$images_counter}');{/if}" {if $config.Detailed_Product_Images.is_rollover eq 'Y'} onmouseover="func_mouse_over(this, {$i.thbn_image_x}, {$i.thbn_image_y});"{/if}  target="_blank">
            <img src="{$i.image_url|amp}" alt="" >
              </a></div>
            {/if}
        {/foreach}

此部分仅用于显示缩略图。不要介意href部分。