{% block element_post_slider %} {% if not sliderConfig %} {% set sliderConfig = element.fieldConfig.elements %} {% endif %} <div class="cms-element-{{ element.type }}{% if sliderConfig.verticalAlign.value %} has-vertical-alignment{% endif %}"> {% block element_post_slider_alignment %} {% if sliderConfig.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 %} {% set postSliderOptions = { productboxMinWidth: sliderConfig.elMinWidth.value ? sliderConfig.elMinWidth.value : '', slider: { gutter: 30, autoplayButtonOutput: false, nav: false, mouseDrag: false, controls: sliderConfig.navigation.value ? true : false, autoplay: sliderConfig.rotate.value ? true : false } } %} {% if not sliderConfig.navigation.value %} {% set postSliderOptions = postSliderOptions|replace_recursive({ slider: { mouseDrag: true } }) %} {% endif %} {% block element_post_slider_slider %} <div class="base-slider product-slider{% if sliderConfig.border.value %} has-border{% endif %}{% if sliderConfig.navigation.value and element.data.posts.elements %} has-nav{% endif %}" {% if element.data.posts.elements %} data-product-slider="true" data-product-slider-options="{{ postSliderOptions|json_encode }}" {% endif %}> {% block element_post_slider_title %} {% if sliderConfig.title.value %} <div class="cms-element-title"> <p class="cms-element-title-paragraph">{{ sliderConfig.title.value }}</p> </div> {% endif %} {% endblock %} {% block element_post_slider_inner %} {% block element_post_slider_element %} <div class="product-slider-container" {% if element.data.posts.elements %} data-product-slider-container="true" {% endif %}> {% if element.data.posts.elements %} {% for post in element.data.posts.elements %} {% block element_post_slider_inner_item %} <div class="product-slider-item"> {% sw_include '@Storefront/storefront/component/blog/card/box.html.twig' with { 'post': post, 'layout': sliderConfig.boxLayout.value } %} </div> {% endblock %} {% endfor %} {% else %} {% block element_post_slider_inner_item_empty %} <div class="product-slider-item"> {% block element_blog_listing_col_empty_alert %} {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with { type: 'info', content: 'sisiBlog6.emptyResultMessage'|trans|sw_sanitize } %} {% endblock %} </div> {% endblock %} {% endif %} </div> {% endblock %} {% block element_post_slider_controls %} {% if sliderConfig.navigation.value and element.data.posts.elements %} <div class="product-slider-controls-container"> <div class="base-slider-controls" data-product-slider-controls="true"> {% block element_post_slider_controls_items %} <button class="base-slider-controls-prev product-slider-controls-prev{% if sliderConfig.border.value %} has-border{% endif %}"> {% block element_post_slider_controls_items_prev_icon %} {% sw_icon 'arrow-head-left' %} {% endblock %} </button> <button class="base-slider-controls-next product-slider-controls-next{% if sliderConfig.border.value %} has-border{% endif %}"> {% block element_post_slider_controls_items_next_icon %} {% sw_icon 'arrow-head-right' %} {% endblock %} </button> {% endblock %} </div> </div> {% endif %} {% endblock %} {% endblock %} </div> {% endblock %} {% if sliderConfig.verticalAlign.value %} </div> {% endif %} {% endblock %} </div>{% endblock %}