<div class="available-gift">
      <h4 class="text-secondary h5">
        <i class="icon-gift"></i><span>{$language.lblAvailableGifts}</span>
      </h4> 
      <div class="clearfix" id="slick-slider">
           {foreach $freeProducts as $freeProduct}
             
            {if isset( $freeProduct['productImage']) &&  $freeProduct['productImage']!=''}
                    {assign var="image" value="{$view_public_path}/uploads/catalog/product/thumb/{$freeProduct['productImage']}"}
            {else}
                    {assign var="image" value="{$view_images}/not-av-img.gif"}
            {/if}
          <div class="thumb">
              {html->anchor href="{$freeProduct.productID|sef_path:'product'}" target="_blank"  title="{$language.lblViewDetails}" content="<img id='img_01' src='{$image}' class='img-fluid' alt='{$freeProduct.productTitle}' title='{$freeProduct.productTitle}'/><p  class='prod-name px-2'>{$freeProduct.productTitle|truncate:20}</p>"}                    
                         
           </div>
          {/foreach} 
         
      </div>
</div>
<script type="text/javascript">
      $(document).ready(function() {
                $('#slick-slider').slick({
                infinite: false,
                dots: false,
	            speed: 700,
                 prevArrow: '<span class="sli-arrow  slick-prev  icon-left-thin"></span>',
                nextArrow: '<span class="sli-arrow right slick-next icon-right-thin"></span>', 
		      	slidesToShow: 5,
				slidesToScroll: 2,
				responsive: [
				    {
				      breakpoint: 600,
				      settings: {
				        slidesToShow: 3,
				        slidesToScroll: 3
				      }
				    },
			  	]
            });
      });
    </script>