vendor/shopware/storefront/Resources/views/storefront/element/cms-element-image-slider.html.twig line 1

Open in your IDE?
  1. {% block element_image_slider %}
  2.     {%  set sliderConfig = element.fieldConfig.elements %}
  4.     <div class="cms-element-{{ element.type }}{% if sliderConfig.displayMode.value == "standard" and sliderConfig.verticalAlign.value %} has-vertical-alignment{% endif %}">
  5.         {% set baseSliderOptions = {
  6.             slider: {
  7.                 navPosition: 'bottom',
  8.                 speed: 500,
  9.                 nav: sliderConfig.navigationDots.value ? true : false,
  10.                 controls: sliderConfig.navigationArrows.value ? true : false,
  11.                 autoHeight: (sliderConfig.displayMode.value == "standard") ? true : false
  12.             }
  13.         } %}
  15.         {% block element_image_slider_alignment %}
  16.             {% if config.verticalAlign.value %}
  17.                 <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 %}">
  18.             {%  endif %}
  19.                 <div class="base-slider image-slider{% if sliderConfig.navigationArrows.value == "outside" %} has-nav-outside{% endif %}{% if sliderConfig.navigationDots.value == "outside" %} has-dots-outside{% endif %}"
  20.                      data-base-slider="true"
  21.                      data-base-slider-options='{{ baseSliderOptions|json_encode }}'>
  23.                     {% block element_image_slider_inner %}
  24.                         <div class="image-slider-container"
  25.                              data-base-slider-container="true">
  26.                             {% for image in element.data.sliderItems %}
  28.                                 {% set imageElement %}
  29.                                     <div class="image-slider-item{% if loop.first != true %} is-not-first{% endif %} is-{{ sliderConfig.displayMode.value }}"{% if sliderConfig.minHeight.value and  sliderConfig.displayMode.value == "cover" %} style="min-height: {{ sliderConfig.minHeight.value }}"{% endif %}>
  30.                                         {% set attributes = {
  31.                                             'class': 'img-fluid image-slider-image',
  32.                                             'alt': (image.media.translated.alt ?: ''),
  33.                                             'title': (image.media.translated.title ?: '')
  34.                                         } %}
  36.                                         {% if element.config.displayMode.value == 'cover' or element.config.displayMode.value == 'contain' %}
  37.                                             {% set attributes = attributes|merge({ 'data-object-fit': element.config.displayMode.value }) %}
  38.                                         {% endif %}
  40.                                         {% sw_thumbnails 'cms-image-slider-thumbnails' with {
  41.                                             media: image.media
  42.                                         } %}
  43.                                     </div>
  44.                                 {% endset %}
  46.                                 {% block element_image_slider_inner_item %}
  47.                                     <div class="image-slider-item-container">
  48.                                         {% if image.url %}
  49.                                             <a href="{{ image.url }}"
  50.                                                class="image-slider-link"
  51.                                                {% if image.newTab %}target="_blank" rel="noopener"{% endif %}>
  52.                                                 {{ imageElement }}
  53.                                             </a>
  54.                                         {% else %}
  55.                                             {{ imageElement }}
  56.                                         {% endif %}
  57.                                     </div>
  58.                                 {% endblock %}
  59.                             {% endfor %}
  60.                         </div>
  62.                         {% block element_image_slider_controls %}
  63.                             {% if sliderConfig.navigationArrows.value %}
  64.                                 <div class="image-slider-controls-container">
  65.                                     <div class="base-slider-controls"
  66.                                         data-base-slider-controls="true">
  67.                                         {% block element_image_slider_controls_items %}
  68.                                             {% block element_image_slider_controls_items_arrows %}
  69.                                                 <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 %}">
  70.                                                     {% block element_image_slider_controls_items_prev_icon %}
  71.                                                         {% sw_icon 'arrow-head-left' %}
  72.                                                     {% endblock %}
  73.                                                 </button>
  74.                                                 <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 %}">
  75.                                                     {% block element_image_slider_controls_items_next_icon %}
  76.                                                         {% sw_icon 'arrow-head-right' %}
  77.                                                     {% endblock %}
  78.                                                 </button>
  79.                                             {% endblock %}
  80.                                         {% endblock %}
  81.                                     </div>
  82.                                 </div>
  83.                             {% endif %}
  84.                         {% endblock %}
  85.                     {% endblock %}
  86.                 </div>
  87.             {% if config.verticalAlign.value %}
  88.                 </div>
  89.             {% endif %}
  90.         {% endblock %}
  91.     </div>
  92. {% endblock %}