custom/static-plugins/CytexTheme/src/Resources/views/storefront/element/cms-element-frontpage-slider.html.twig line 1

Open in your IDE?
  1. {% block element_frontpage_slider %}
  3.     {% set sliderConfig = element.fieldConfig.elements %}
  4.     {% set sliderItems = element.fieldConfig.elements.sliderItems.value %}
  6.     <div class="cms-element-{{ element.type }}" style="height:{{ sliderConfig.minHeight.value }};"
  7.          mobileHideDot='{{ sliderConfig.navigationDotsMobileHide.value }}'>
  8.         {% set baseSliderOptions = {
  9.             slider: {
  10.                 navPosition: 'bottom',
  11.                 speed: 500,
  12.                 autoplay: true,
  13.                 autoplayTimeout: 5000,
  14.                 autoplayButton: false,
  15.                 autoplayButtonOutput: false,
  16.                 nav: sliderConfig.navigationDots.value ? true : false,
  17.                 controls: sliderConfig.navigationArrows.value ? true : false,
  18.                 autoHeight: (sliderConfig.displayMode.value == "standard") ? true : false
  19.             }
  20.         } %}
  22.         {% block element_image_slider_text_alignment %}
  24.             <div
  25.                 class="base-slider frontpage-slider {{ sliderConfig.verticalAlign.value }} {% if sliderConfig.navigationArrows.value == "outside" %} has-nav-outside{% endif %}{% if sliderConfig.navigationDots.value == "outside" %} has-dots-outside{% endif %}"
  26.                 data-base-slider="true"
  27.                 data-base-slider-options='{{ baseSliderOptions|json_encode }}'>
  29.                 {% block element_image_slider_text_inner %}
  30.                     <div class="frontpage-slider-container"
  31.                          data-base-slider-container="true">
  32.                         {% for image in sliderItems %}
  33.                             {% set imageElement %}
  34.                                 <div
  35.                                     class="frontpage-slider-item{% if loop.first != true %} is-not-first{% endif %} is-{{ sliderConfig.displayMode.value }}"
  36.                                     style="{% if sliderConfig.minHeight.value %}max-height: {{ sliderConfig.minHeight.value }}{% endif %}">
  37.                                     {% set attributes = {
  38.                                         'class': 'img-fluid frontpage-slider-image',
  39.                                     } %}
  41.                                     {% if element.config.displayMode.value == 'cover' or element.config.displayMode.value == 'contain' %}
  42.                                         {% set attributes = attributes|merge({ 'data-object-fit': element.config.displayMode.value }) %}
  43.                                     {% endif %}
  45.                                     <img src="{{ image.mediaUrl }}" alt="" class="frontpage-slider-img
  46.                                     {% if element.config.displayMode.value == 'cover' %} frontpage-slider-img-cover {% endif %}
  47.                                     {% if image.imageVertical == "left" %}frontpage-slider-img-vertical-left{% elseif image.imageVertical == "right" %}frontpage-slider-img-vertical-right{% endif %}
  48.                                     {% if image.imageHorizontal == "top" %}frontpage-slider-img-horizontal-top{% elseif image.imageHorizontal == "bottom" %}frontpage-slider-img-horizontal-bottom{% endif %}"
  49.                                     style="{% if sliderConfig.minHeight.value %}min-height: {{ sliderConfig.minHeight.value }}{% endif %}">
  50.                                     <div class="frontpage-slider-text-area-container boxed">
  51.                                         <div class="frontpage-slider-text-area">
  52.                                             <div class="frontpage-slider-text-area-inner">
  53.                                                 {% if image.headline != '' %}
  54.                                                     {% if loop.index == 1 %}
  55.                                                         <h1 class="frontpage-slider-headline">{{ image.headline }}</h1>
  56.                                                     {% else %}
  57.                                                         <div class="h1 frontpage-slider-headline">{{ image.headline }}</div>
  58.                                                     {% endif %}
  59.                                                 {% endif %}
  60.                                                 {% if image.text != '' %}<p
  61.                                                     class="frontpage-slider-text">{{ image.text }}</p>{% endif %}
  62.                                                 {% if image.buttonText != '' %}<a
  63.                                                     {% if image.buttonLink != '' %}href="{{ image.buttonLink }}"{% endif %}
  64.                                                     class="btn cytex-btn-hover-icon-primary frontpage-slider-button">{{ image.buttonText }}</a>{% endif %}
  65.                                             </div>
  66.                                         </div>
  67.                                     </div>
  68.                                 </div>
  69.                             {% endset %}
  71.                             {% block element_image_slider_text_inner_item %}
  72.                                 <div class="frontpage-slider-item-container ">
  73.                                     {% if image.url %}
  74.                                         <a href="{{ image.url }}"
  75.                                            class="frontpage-slider-link">
  76.                                             {{ imageElement }}
  77.                                         </a>
  78.                                     {% else %}
  79.                                         {{ imageElement }}
  80.                                     {% endif %}
  81.                                 </div>
  82.                             {% endblock %}
  83.                         {% endfor %}
  84.                     </div>
  86.                     {% block element_image_slider_text_controls %}
  87.                         {% if sliderConfig.navigationArrows.value %}
  88.                             <div class="image-slider-controls-container">
  89.                                 <div class="base-slider-controls"
  90.                                      data-base-slider-controls="true">
  91.                                     {% block element_image_slider_text_controls_items %}
  92.                                         {% block element_image_slider_text_controls_items_arrows %}
  93.                                             <button name="Sliderprevious" aria-label="Previous slide"
  94.                                                     class="base-slider-controls-prev image-slider-controls-prev{% if sliderConfig.navigationArrows.value == "outside" %} is-nav-prev-outside{% elseif sliderConfig.navigationArrows.value == "inside" %} is-nav-prev-inside{% endif %}">
  95.                                                 {% block element_image_slider_text_controls_items_prev_icon %}
  96.                                                     {% sw_icon 'arrow-left' style {
  97.                                                         'namespace': 'CytexTheme',
  98.                                                         'pack': 'cytex',
  99.                                                     } %}
  100.                                                 {% endblock %}
  101.                                             </button>
  102.                                             <button name="Slidernext" aria-label="Next slide"
  103.                                                     class="base-slider-controls-next image-slider-controls-next{% if sliderConfig.navigationArrows.value == "outside" %} is-nav-next-outside{% elseif sliderConfig.navigationArrows.value == "inside" %} is-nav-next-inside{% endif %}">
  104.                                                 {% block element_image_slider_text_controls_items_next_icon %}
  105.                                                     {% sw_icon 'arrow-right' style {
  106.                                                         'namespace': 'CytexTheme',
  107.                                                         'pack': 'cytex',
  108.                                                     } %}
  109.                                                 {% endblock %}
  110.                                             </button>
  111.                                         {% endblock %}
  112.                                     {% endblock %}
  113.                                 </div>
  114.                             </div>
  115.                         {% endif %}
  116.                     {% endblock %}
  117.                 {% endblock %}
  118.             </div>
  120.         {% endblock %}
  121.     </div>
  123. {% endblock %}