<div class="ui three cards" id="products">
<!-- Slider main container -->
<div class="swiper-exclusiveOffers-button-prev"></div>
<div class="swiper swiper-exclusiveOffers">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
{% if slides is defined and slides is not empty %}
{% for slide in slides %}
{% set path = slide.images.first.path|imagine_filter('sylius_shop_product_original') %}
<div class="ui fluid card Product_Box_content swiper-slide swiper-slide-active" style="width: 569px;">
<div class="Product_Box_content--content">
<a href="{{ slide.buttonUrl }}">
<div class="Product_Box_content--image">
<img src="{{ path }}" alt="{{ slide.title }}" class="ui bordered image">
</div>
</a>
</div>
<div class="Product_Box_content--content">
<a href="{{ slide.buttonUrl }}">
<div class="Product_Box_content--name">{{ slide.title }}</div>
</a>
<a href="{{ slide.buttonUrl }}" class="swiper-exclusiveOffers__link">
{{ slide.buttonTitle }}
</a>
</div>
</div>
{% endfor %}
{% endif %}
</div>
<!-- If we need pagination -->
<div class="swiper-pagination-exclusiveOffers"></div>
<!-- If we need navigation buttons -->
</div>
<div class="swiper-exclusiveOffers-button-next"></div>
</div>