{% block element_cbax_manufacturers_slider %}
{% set items = slider_items.all() %}
<div class="cms-element-product-slider cms-element-{{ element.type }}{% if config.displayMode.value == "standard" and config.verticalAlign.value %} has-vertical-alignment{% endif %}">
{% block element_cbax_manufacturers_slider_alignment %}
{% if config.verticalAlign.value %}
<div class="cms-element-alignment{% if config.verticalAlign.value == "center" %} align-self-center{% elseif config.verticalAlign.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
{% endif %}
{% set productSliderOptions = {
productboxMinWidth: config.elMinWidth.value ? config.elMinWidth.value : '',
slider: {
gutter: 30,
autoplayButtonOutput: false,
nav: false,
mouseDrag: false,
controls: config.navigation.value ? true : false,
autoplay: config.rotate.value ? true : false
}
} %}
{% if not config.navigation.value %}
{% set productSliderOptions = productSliderOptions|replace_recursive({
slider: {
mouseDrag: true
}
}) %}
{% endif %}
{% block element_cbax_manufacturers_slider_slider %}
<div class="base-slider product-slider {{ element.type }}{% if config.border.value %} has-border{% endif %}{% if config.navigation.value %} has-nav{% endif %}"
data-product-slider="true"
data-product-slider-options="{{ productSliderOptions|json_encode }}">
{% block element_cbax_manufacturers_slider_title %}
{% if config.manufacturerSliderHeadline.value %}
<div class="cms-element-title">
<p class="cms-element-title-paragraph">{{ config.manufacturerSliderHeadline.value }}</p>
</div>
{% endif %}
{% endblock %}
{% block element_cbax_manufacturers_slider_inner %}
{% block element_cbax_manufacturers_slider_element %}
<div class="product-slider-container"
data-product-slider-container="true">
{% for item in items %}
{% block element_cbax_manufacturers_slider_inner_item %}
<div class="product-slider-item">
{% sw_include '@Storefront/storefront/cbax-manufacturer/component/manufacturer/manufacturers-slider/box-manufacturer.html.twig' with {
'layout': config.boxLayout.value,
'displayMode': config.displayMode.value
} %}
</div>
{% endblock %}
{% endfor %}
</div>
{% endblock %}
{% block element_cbax_manufacturers_slider_controls %}
{% if config.navigation.value %}
<div class="product-slider-controls-container">
<div class="base-slider-controls"
data-product-slider-controls="true">
{% block element_cbax_manufacturers_slider_controls_items %}
<button
class="base-slider-controls-prev product-slider-controls-prev{% if config.border.value %} has-border{% endif %}">
{% block element_cbax_manufacturers_slider_controls_items_prev_icon %}
{% sw_icon 'arrow-head-left' %}
{% endblock %}
</button>
<button
class="base-slider-controls-next product-slider-controls-next{% if config.border.value %} has-border{% endif %}">
{% block element_cbax_manufacturers_slider_controls_items_next_icon %}
{% sw_icon 'arrow-head-right' %}
{% endblock %}
</button>
{% endblock %}
</div>
</div>
{% endif %}
{% endblock %}
{% endblock %}
</div>
{% endblock %}
{% if config.verticalAlign.value %}
</div>
{% endif %}
{% endblock %}
</div>
{% endblock %}