templates/includes/blocks/image-slider.html.twig line 1

  1. <div class="image-slider {{ content.top }} {{ content.bottom }}" x-data="imageslider">
  2.     <div class="image-slider__container">
  3.         <div class="swiper-container" x-ref="swiper">
  4.             <div class="image-slider__arrows">
  5.                 <div class="image-slider__prev" x-ref="prev">
  6.                     <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 18 35">
  7.                         <path d="M17.16 34.32V0L0 17.16l17.16 17.16z" fill="currentColor"/>
  8.                     </svg>
  9.                 </div>
  10.                 <div class="image-slider__next" x-ref="next">
  11.                     <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 24">
  12.                         <path d="M.066.17v23.202l11.6-11.601L.067.17Z" fill="currentColor"/>
  13.                     </svg>
  14.                 </div>
  15.             </div>
  16.             <div class="swiper-wrapper">
  17.                 {% for image in content.images %}
  18.                     <div class="swiper-slide">
  19.                         <img class="image-slider__image" src ="{{ image|thumbnailUrl('2880x') }}"
  20.                              srcset ="{{ image|thumbnailUrl('320x') }} 320w, {{ image|thumbnailUrl('640x') }} 640w, {{ image|thumbnailUrl('1280x') }} 1280w, {{ image|thumbnailUrl('1440x') }} 1440w, {{ image|thumbnailUrl('2048x') }} 2048w"
  21.                              alt="{{ image.description|striptags }}" x-ref="image" sizes="(min-width: 1440px) 1440px, 100vw">
  22.                     </div>
  23.                 {% endfor %}
  24.             </div>
  25.         </div>
  26.         {% if content.imageSliderActionLink != null %}
  27.             <div class="image-slider__actions" x-ref="actions">
  28.                 {% if content.imageSliderButtonType == 'box' %}
  29.                     <a href="{{ content.imageSliderActionLink }}"
  30.                        class="button button--{{ content.imageSliderButtonColor }} button--size-{{ content.imageSliderButtonSize }}">
  31.                         <span class="button__inner">
  32.                             {{ content.imageSliderButtonLabel }}
  33.                         </span>
  34.                     </a>
  35.                 {% elseif content.imageSliderButtonType == 'text' %}
  36.                     <a href="{{ content.imageSliderActionLink }}"
  37.                        class="text-button text-button--{{ content.imageSliderTextButtonColor }} {% if content.uppercase %} uppercase {% endif %}">
  38.                         {{ content.imageSliderButtonLabel }}
  39.                         <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16">
  40.                             <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  41.                                   stroke-linecap="round" stroke-linejoin="round"/>
  42.                         </svg>
  43.                     </a>
  44.                 {% endif %}
  45.             </div>
  46.         {% endif %}
  47.     </div>
  48. </div>