{if $defProductImage !=''}
{assign var="imageCount" value=$productImages|count+1}
{else}
{assign var="imageCount" value=$productImages|count}
{/if} 
{if $type|default:'' =='combination'}
<div class="img-slider" id="slidermain">
				{if $productImages|count>0}
					{foreach $productImages as $image key="key"}
    <div class="slider-main">
								<img id="img_01" src="{$view_public_path}/uploads/catalog/product-combination/preview/{$image['productImage']}" class="img-responsive" /></div>
					{/foreach}
					{if $defProductImage !=''}
<div class="slider-main">
    <img id="img_01" src="{$view_public_path}/uploads/catalog/product/preview/{$defProductImage}"   class="img-responsive"/></div>
					{/if}
				{else}
    <div class="slider-main">
							<img id="img_01" src="{$view_public_path}/uploads/catalog/product/preview/{$defProductImage}" class="img-responsive" />
</div>
				{/if}
			</div>

     {if $imageCount>1}
    <div class="thumb-view ">
         {if $productImages|count>3}
        <a href="javascript:void(0);" class="prev-slider icon-left-arrow arrow"></a>
        {/if}
			<div class="overview clearfix" id="slider1">
				{if $productImages|count>0}
					{foreach $productImages as $image key="key"}
						<div class="thumb">
							<a href="#">
								<img id="img_01" src="{$view_public_path}/uploads/catalog/product-combination/small/{$image['productImage']}" class="img-responsive" />
							</a>
						</div>
					{/foreach}
					{if $defProductImage !=''}
						<div class="thumb">
							<a href="#">
								<img id="img_01" src="{$view_public_path}/uploads/catalog/product/small/{$defProductImage}"   class="img-responsive"/>
							</a>
						</div>
					{/if}
				{else}
					<div class="thumb">
						<a href="#">
							<img id="img_01" src="{$view_public_path}/uploads/catalog/product/small/{$defProductImage}" class="img-responsive" />
						</a>
					</div>
				{/if}
			</div>
         {if $productImages|count>3}
        <a href="javascript:void(0);" class="next-slider icon-right arrow"></a>
        {/if}
    </div>
    {/if}
   
{else}
<div class="img-slider" id="slidermain">
				{if $defProductImage !=''}
						<div class="slider-main">
							<img id="img_01" src="{$view_public_path}/uploads/catalog/product/preview/{$defProductImage}" class="img-responsive"  />
    </div>
				{/if}
				{if $productImages|count>0}
					{foreach $productImages as $image key="key"}
			<div class="slider-main">
							<img id="img_01" src="{$view_public_path}/uploads/catalog/product/preview/{$image['productImage']}"  class="img-responsive" />
    </div>
					{/foreach}
				{/if}
			</div>

	
     {if $imageCount>1}
    <div class="thumb-view ">
        
			<div class="overview clearfix" id="slider1">
				{if $defProductImage !=''}
					<div class="thumb">
						<a href="#"  class="active">
							<img id="img_01" src="{$view_public_path}/uploads/catalog/product/small/{$defProductImage}" class="img-responsive"  />
						</a>
					</div>
				{/if}
				{if $productImages|count>0}
					{foreach $productImages as $image key="key"}
						<div class="thumb">
						<a href="#"  >
							<img id="img_01" src="{$view_public_path}/uploads/catalog/product/small/{$image['productImage']}"  class="img-responsive" />
						</a>
					</div>
					{/foreach}
				{/if}
			</div>
       
    </div>
    {/if}
{/if}	
{if $imageCount>1}
	<script type="text/javascript">
	{literal}
		$(document).ready(function(){
             $('#slidermain').slick({
              slidesToShow: 1,
              slidesToScroll: 1,
              arrows: false,
              fade: true,
              asNavFor: '#slider1'
            });
            $('#slider1').slick({
              slidesToShow: 2,
              slidesToScroll: 1,
              asNavFor: '#slidermain',
              prevArrow: '<span class="slick-arrow  slick-prev icon-left-arrow"></span>',
              nextArrow: '<span class="slick-next slick-arrow icon-right"></span>',     
              infinite: false,
              dots: false,
	          speed: 700,
              //centerMode: true,
              focusOnSelect: true
            });
            
           
            
		});
	{/literal}	
	</script>
{/if}
