<h3>{{ heading_title }}</h3>
<div class="row">
<div class="swiper-viewport swiper-products">
<div class="swiper-pagination slides-featured{{ module }}"></div>
<div id="featured{{ module }}" class="swiper-container col-sm-12">
<div class="swiper-wrapper">
{% for product in products %}
<div class="swiper-slide">
<div class="product-layout">
<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" /></a></div>
<div class="caption">
<h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
<p>{{ product.description }}</p>
{% if product.rating %}
<div class="rating">
{% for i in 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>
<div class="button-group">
<button type="button" onclick="cart.add('{{ product.product_id }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
<button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="swiper-pager slide-featured{{ module }}">
<div class="swiper-button-next next-featured{{ module }}"></div>
<div class="swiper-button-prev prev-featured{{ module }}"></div>
</div>
</div>
</div>
<script><!--
$('#featured{{ module }}').swiper({
mode: 'horizontal',
slidesPerView: 4,
pagination: '.slides-featured{{ module }}',
paginationClickable: true,
swiperPager: '.slide-featured{{ module }}',
nextButton: '.next-featured{{ module }}',
prevButton: '.prev-featured{{ module }}',
spaceBetween: 30,
autoplay: 3000,
autoplayDisableOnInteraction: true,
loop: false,
loopAdditionalSlides: 0,
breakpoints: {
1200: {
slidesPerView: 4,
spaceBetween: 30
},
992: {
slidesPerView: 3,
spaceBetween: 30
},
768: {
slidesPerView: 2,
spaceBetween: 30
},
420: {
slidesPerView: 1,
spaceBetween: 30
}
}
});
--></script>