custom/plugins/VKTheme/src/Resources/views/storefront/element/cms-element-product-slider.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/element/cms-element-product-slider.html.twig' %}
  3. {% block element_product_slider %}
  4.     {% if not sliderConfig %}
  5.         {% set sliderConfig = element.fieldConfig.elements %}
  6.     {% endif %}
  7.     {% if element.data.products.elements %}
  8.         <div
  9.             class="cms-element-{{ element.type }}{% if sliderConfig.displayMode.value == "standard" and sliderConfig.verticalAlign.value %} has-vertical-alignment{% endif %}">
  10.             {% block element_product_slider_alignment %}
  11.                 {% if config.verticalAlign.value %}
  12.                     <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 %}">
  13.                 {% endif %}
  14.                 {% set productSliderOptions = {
  15.                     productboxMinWidth: sliderConfig.elMinWidth.value ? sliderConfig.elMinWidth.value : '',
  16.                     slider: {
  17.                         gutter: 30,
  18.                         autoplayButtonOutput: false,
  19.                         nav: false,
  20.                         nav: true,
  21.                         mouseDrag: sliderConfig.navigation.value ? false : true,
  22.                         controls: sliderConfig.navigation.value ? true : false,
  23.                         autoplay: sliderConfig.rotate.value ? true : false
  24.                     }
  25.                 } %}
  26.                 {% block element_product_slider_slider %}
  27.                     {{ parent() }}
  29.                 {% endblock %}
  30.                 {% if config.verticalAlign.value %}
  31.                     </div>
  32.                 {% endif %}
  33.             {% endblock %}
  34.         </div>
  35.     {% endif %}
  36. {% endblock %}
  37. {% block element_product_slider_controls_items %}
  38.     <button
  39.             class="base-slider-controls-prev product-slider-controls-prev{% if sliderConfig.border.value %} has-border{% endif %}">
  40.         {% block element_product_slider_controls_items_prev_icon %}
  41.             <span class="custom-arrows" style="display:none;">
  42.                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" class="bi bi-chevron-double-left" viewBox="0 0 16 16">
  43.                     <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
  44.                     <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
  45.                 </svg>
  46.             </span>
  47.             {% sw_icon 'arrow-head-left' %}
  48.         {% endblock %}
  49.     </button>
  50.     <button
  51.             class="base-slider-controls-next product-slider-controls-next{% if sliderConfig.border.value %} has-border{% endif %}">
  52.         {% block element_product_slider_controls_items_next_icon %}
  53.             <span class="custom-arrows" style="display:none;">
  54.                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" class="bi bi-chevron-double-right" viewBox="0 0 16 16">
  55.                     <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
  56.                     <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
  57.                 </svg>
  58.             </span>
  59.             {% sw_icon 'arrow-head-right' %}
  60.         {% endblock %}
  61.     </button>
  62. {% endblock %}