{% block inspirations_slider_el %}
{% set currentSalesChannel = context.salesChannel.id %}
{% set pickedSaleschannel = element.config.salesChannel.value %}
{% set shouldDisplayEl = pickedSaleschannel is same as(currentSalesChannel) or pickedSaleschannel is same as('') %}
{% if shouldDisplayEl %}
{% set productSliderOptions = {
productboxMinWidth:'300',
slider: {
gutter: 20,
nav: false,
mouseDrag: true,
controls: true,
autoplay: false,
prevButton:".slider-controls-prev-button-#{element.id}",
nextButton:".slider-controls-next-button-#{element.id}",
controls: true,
}
} %}
<div class="base-slider product-slider product-slider--inspirations has-nav"
data-product-slider="true"
data-product-slider-options="{{ productSliderOptions|json_encode }}">
{% block element_product_slider_title %}
<div class="cms-element-title">
<p class="cms-element-title-paragraph">
{{ element.config.elementTitle.value }}
</p>
</div>
{% endblock %}
{% block element_product_slider_inner %}
{% block element_product_slider_element %}
<div class="product-slider-container"
data-product-slider-container="true">
{% for category in element.data.all %}
{% set url = category_url(category) %}
<div class="product-slider-item">
{% if element.config.media.value[loop.index0] is defined and element.config.media.value[loop.index0] %}
{% set mediaImage = searchMedia([element.config.media.value[loop.index0]] ,context.context) %}
{% set singleImage = mediaImage.get(element.config.media.value[loop.index0]) %}
{% elseif category.customFields.custom_category_info_listing_banner %}
{% set mediaImage = searchMedia([category.customFields.custom_category_info_listing_banner] ,context.context) %}
{% set singleImage = mediaImage.get(category.customFields.custom_category_info_listing_banner) %}
{% else %}
{% set mediaImage = null %}
{% set singleImage = null %}
{% endif %}
<div class="col inspiration-card"
{% if singleImage.url %}
style="background-image:url('{{ singleImage.url }}')"
{% endif %}
>
<a class="d-inline-block w-100 h-100" href="{{ url }}">
<div class="inspiration-card-title-wrapper">
<h3 class="inspiration-card-title">
{{ category.name }}
</h3>
<a class="inspiration-card-link arrow-right-rotate">
<span>
{% sw_icon 'arrow_left' style {
'namespace': 'Tuerschild_2',
} %}
</span>
</a>
</div>
</a>
</div>
</a>
</div>
{% endfor %}
</div>
{% endblock %}
<div class="slider-controls-wrapper d-flex align-items-center justify-content-between">
<div class="slider-controls slider-controls-{{ element.id }} w-100">
<div class="d-flex align-items-center justify-content-center">
<span class="slider-controls-button slider-controls-prev-button-{{ element.id }} ">
{% sw_icon 'arrow_left' style {
'namespace': 'Tuerschild_2',
} %} </span>
<span class="slider-controls-button slider-controls-next-button-{{ element.id }} arrow-right-rotate">
{% sw_icon 'arrow_left' style {
'namespace': 'Tuerschild_2',
} %} </span>
</div>
{% if element.config.buttonLink.value %}
<a href="{{ element.config.buttonLink.value }}" class="slider-controls-link">Alle
Inspirationen</a>
{% endif %}
</div>
</div>
{% endblock %}
</div>
{% endif %}
{% endblock %}