<div class="tab-pane" id="latestp">
<div class="row thummargin">
  <div id="latest" class="owl-theme owl-carousel">
  {% for product in products %}
  <div class="product-layout col-xs-12">
    <div class="product-thumb transition">
      <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive center-block" /></a>
          <!-- insp Images Start -->
                        {% set t = 0 %}
                          {% for insp_image in product.insp_images %}
                          {% if t == 0 %}
                           <a href="{{ product.href }}"><img src="{{ insp_image.popup }}" class="img-responsive second-img" alt="hover image"/></a>
                          {% set t = t + 1 %}
                          {% endif %}
                        {% endfor %}
        <!-- insp Images End -->
        {% if product.price %}
          {% if product.special %}
              <span class="salepro">sale</span>
          {% endif %}
      {% endif %}
      </div>
      <div class="caption text-center">
        <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
       {#  <p>{{ product.description }}</p> #}
        {% if product.rating %}
        <div class="rating">{% for i in 1..5 %}
          {% if product.rating < i %} <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> {% else %} <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> {% endif %}
          {% endfor %}</div>
        {% endif %}
        {% if product.price %}
        <p class="price"> {% if not product.special %}
          {{ product.price }}
          {% else %} <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span> {% endif %}
          {# {% if product.tax %} <span class="price-tax">{{ text_tax }} {{ product.tax }}</span> {% endif %} #} </p>
        {% endif %} 
      <div class="button-group">
        <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><svg width="16px" height="16px"><use xlink:href="#addwish"></use></svg></button>
        <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><svg width="16px" height="16px"><use xlink:href="#addcompare"></use></svg></button>
        <div class="bquickv"></div>
      </div>
      <button class="acart" type="button" onclick="cart.add('{{ product.product_id }}');">{# <i class="fa fa-shopping-cart"></i>  #}<span class="hidden-xs">{{ button_cart }}</span></button>
    </div>
    </div>
  </div>
  {% endfor %}
</div>
  </div>
</div>

</div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
    $("#latest").owlCarousel({
    itemsCustom : [
    [0, 2],
    [375, 2],
    [600, 3],
    [768, 3],
    [992, 4],
    [1200, 5]
    ],
      // autoPlay: 1000,
      navigationText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
      navigation : true,
      pagination:false
    });
    });
</script>