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

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/element/cms-element-image-slider.html.twig' %}
  2. {% block element_image_slider_inner %}
  3.     <div class="image-slider-container"
  4.          data-base-slider-container="true">
  5.         {% for image in element.data.sliderItems %}
  7.             {% set imageElement %}
  8.                 <div class="image-slider-item{% if loop.first != true %} {% endif %} is-{{ sliderConfig.displayMode.value }}"{% if sliderConfig.minHeight.value and  sliderConfig.displayMode.value == "cover" %} style="min-height: {{ sliderConfig.minHeight.value }}"{% endif %}>
  9.                     {% set attributes = {
  10.                         'class': 'img-fluid image-slider-image',
  11.                         'alt': (image.media.translated.alt ?: ''),
  12.                         'title': (image.media.translated.title ?: '')
  13.                     } %}
  15.                     {% if element.config.displayMode.value == 'cover' or element.config.displayMode.value == 'contain' %}
  16.                         {% set attributes = attributes|merge({ 'data-object-fit': element.config.displayMode.value }) %}
  17.                     {% endif %}
  19.                     {% sw_thumbnails 'cms-image-slider-thumbnails' with {
  20.                         media: image.media
  21.                     } %}
  23.                     <div class="container hervmo-slider--container">
  24.                         <div class="slider-text">
  25.                             {{ image.media.translated.customFields.hemo_slider_edit_text | raw}}
  26.                         </div>
  27.                     </div>
  28.                 </div>
  29.             {% endset %}
  31.             {% block element_image_slider_inner_item %}
  32.                 <div class="image-slider-item-container">
  33.                     {% if image.url %}
  34.                         <a href="{{ image.url }}"
  35.                            class="image-slider-link"
  36.                            {% if image.newTab %}target="_blank" rel="noopener"{% endif %}>
  37.                             {{ imageElement }}
  38.                         </a>
  39.                     {% else %}
  40.                         {{ imageElement }}
  41.                     {% endif %}
  42.                 </div>
  43.             {% endblock %}
  44.         {% endfor %}
  45.     </div>
  47.     {% block element_image_slider_controls %}
  48.         {% if sliderConfig.navigationArrows.value %}
  49.             <div class="image-slider-controls-container">
  50.                 <div class="base-slider-controls"
  51.                      data-base-slider-controls="true">
  52.                     {% block element_image_slider_controls_items %}
  53.                         {% block element_image_slider_controls_items_arrows %}
  54.                             <button 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 %}">
  55.                                 {% block element_image_slider_controls_items_prev_icon %}
  56.                                     {% sw_icon 'arrow-head-left' %}
  57.                                 {% endblock %}
  58.                             </button>
  59.                             <button 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 %}">
  60.                                 {% block element_image_slider_controls_items_next_icon %}
  61.                                     {% sw_icon 'arrow-head-right' %}
  62.                                 {% endblock %}
  63.                             </button>
  64.                         {% endblock %}
  65.                     {% endblock %}
  66.                 </div>
  67.             </div>
  68.         {% endif %}
  69.     {% endblock %}
  70. {% endblock %}