{% sw_extends "@Storefront/storefront/element/cms-element-product-slider.html.twig" %}
{% block element_product_slider %}
{% if not sliderConfig %}
{% set sliderConfig = element.fieldConfig.elements %}
{% endif %}
<div class="base-slider product-slider data-product-slider=true cms-element-{% if element.type == null %}{{element}}{% else %}{{element.type}}{% endif %} {% if sliderConfig.displayMode.value == "standard" and sliderConfig.verticalAlign.value %} has-vertical-alignment{% endif %} data-econda-cross-sell">
{% block element_product_slider_alignment %}
{% if config.verticalAlign.value %}
<div class="cms-element-alignment{% if sliderConfig.verticalAlign.value == "center" %} align-self-center{% elseif sliderConfig.verticalAlign.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
{% endif %}
<div class="econda-slider base-slider product-slider{% if sliderConfig.border.value %} has-border{% endif %}{% if sliderConfig.navigation.value %} has-nav{% endif %}" style="overflow: hidden; padding-left: 22px"
data-product-slider="true"
data-product-slider-options='{
{% if sliderConfig.elMinWidth.value %}"productboxMinWidth": "{{ sliderConfig.elMinWidth.value }}",{% endif %}
"slider": {
"gutter": 30,
"autoplayButtonOutput": false,
"nav": false,
"controls": {% if sliderConfig.navigation.value %}true{% else %}false{% endif %},
{% if not sliderConfig.navigation.value %}"mouseDrag": true,{% endif %}
"autoplay": {% if sliderConfig.rotate.value %}true{% else %}false{% endif %}
}
}'>
{% block element_product_slider_title %}
{% if sliderConfig.ecTitle.value %}
<div class="cms-element-title">
<h2 class="cms-element-title-paragraph">{{ cs_response.widgetDetails.title }}</h2>
</div>
{% else %}
<div class="cms-element-title">
<h2 class="cms-element-title-paragraph">{{ sliderConfig.title.value }}</h2>
</div>
{% endif %}
{% endblock %}
{% block element_product_slider_inner %}
{% block element_product_slider_element %}
<div class="product-econda-container"
data-product-slider-container="true">
{% for product in cs_response.products %}
{% block element_product_slider_inner_item %}
<div class="product-econda-item">
{% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
'layout': sliderConfig.boxLayout.value,
'displayMode': sliderConfig.displayMode.value
} %}
</div>
{% endblock %}
{% endfor %}
</div>
{% endblock %}
{% block element_product_slider_controls %}
{% if sliderConfig.navigation.value %}
<div class="product-slider-controls-container">
<div class="base-slider-controls"
data-product-slider-controls="true">
{% block element_product_slider_controls_items %}
<button class="ec-prev base-slider-controls-prev product-slider-controls-prev{% if sliderConfig.border.value %} has-border{% endif %}">
{% block element_product_slider_controls_items_prev_icon %}
{% sw_icon 'arrow-head-left' %}
{% endblock %}
</button>
<button class="ec-next base-slider-controls-next product-slider-controls-next{% if sliderConfig.border.value %} has-border{% endif %}">
{% block element_product_slider_controls_items_next_icon %}
{% sw_icon 'arrow-head-right' %}
{% endblock %}
</button>
{% endblock %}
</div>
</div>
{% endif %}
{% endblock %}
{% endblock %}
</div>
{% if config.verticalAlign.value %}
</div>
{% endif %}
{% endblock %}
</div>
{% endblock %}