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: sliderConfig.speed.value,
  9. autoplayTimeout: sliderConfig.autoplayTimeout.value,
  10. autoplay: sliderConfig.autoSlide.value,
  11. autoplayButtonOutput: false,
  12. nav: sliderConfig.navigationDots.value ? true : false,
  13. controls: sliderConfig.navigationArrows.value ? true : false,
  14. autoHeight: (sliderConfig.displayMode.value == "standard") ? true : false
  15. }
  16. } %}
  18. {% block element_image_slider_alignment %}
  19. {% if config.verticalAlign.value %}
  20. <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 %}">
  21. {% endif %}
  22. <div class="base-slider image-slider{% if sliderConfig.navigationArrows.value == "outside" %} has-nav-outside{% endif %}{% if sliderConfig.navigationDots.value == "outside" %} has-dots-outside{% endif %}"
  23. data-base-slider="true"
  24. data-base-slider-options='{{ baseSliderOptions|json_encode }}'>
  26. {% block element_image_slider_inner %}
  27. <div class="image-slider-container"
  28. data-base-slider-container="true">
  29. {% for image in element.data.sliderItems %}
  31. {% set imageElement %}
  32. <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 %}>
  33. {% set attributes = {
  34. 'class': 'img-fluid image-slider-image',
  35. 'alt': (image.media.translated.alt ?: ''),
  36. 'title': (image.media.translated.title ?: '')
  37. } %}
  39. {% if element.config.displayMode.value == 'cover' or element.config.displayMode.value == 'contain' %}
  40. {% set attributes = attributes|merge({ 'data-object-fit': element.config.displayMode.value }) %}
  41. {% endif %}
  43. {% sw_thumbnails 'cms-image-slider-thumbnails' with {
  44. media: image.media
  45. } %}
  46. </div>
  47. {% endset %}
  49. {% block element_image_slider_inner_item %}
  50. <div class="image-slider-item-container">
  51. {% if image.url %}
  52. <a href="{{ image.url }}"
  53. class="image-slider-link"
  54. {% if image.newTab %}target="_blank" rel="noopener"{% endif %}>
  55. {{ imageElement }}
  56. </a>
  57. {% else %}
  58. {{ imageElement }}
  59. {% endif %}
  60. </div>
  61. {% endblock %}
  62. {% endfor %}
  63. </div>
  65. {% block element_image_slider_controls %}
  66. {% if sliderConfig.navigationArrows.value %}
  67. <div class="image-slider-controls-container">
  68. <div class="base-slider-controls"
  69. data-base-slider-controls="true">
  70. {% block element_image_slider_controls_items %}
  71. {% block element_image_slider_controls_items_arrows %}
  72. <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 %}">
  73. {% block element_image_slider_controls_items_prev_icon %}
  74. {% sw_icon 'arrow-head-left' %}
  75. {% endblock %}
  76. </button>
  77. <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 %}">
  78. {% block element_image_slider_controls_items_next_icon %}
  79. {% sw_icon 'arrow-head-right' %}
  80. {% endblock %}
  81. </button>
  82. {% endblock %}
  83. {% endblock %}
  84. </div>
  85. </div>
  86. {% endif %}
  87. {% endblock %}
  88. {% endblock %}
  89. </div>
  90. {% if config.verticalAlign.value %}
  91. </div>
  92. {% endif %}
  93. {% endblock %}
  94. </div>
  95. {% endblock %}