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

  1. <div class="logo-slider {% if content.inverted %}logo-slider--inverted {% endif %} {{ content.top }} {{ content.bottom }}"
  2.      x-data="logoslider">
  3.     <div class="logo-slider__container">
  4.         <div class="logo-slider__title" x-ref="title">
  5.             {% if content.logoSliderPagina %}
  6.             {% if content.logoSliderSeoHeadlinePagina %}<{{ content.logoSliderSeoHeadlinePagina }}>{% endif %}
  7.                 <div class="pagina" >
  8.                     {{ content.logoSliderPagina }}
  9.                 </div>
  10.             {% if content.logoSliderSeoHeadlinePagina %}</{{ content.logoSliderSeoHeadlinePagina }}>{% endif %}
  11.             {% endif %}
  12.            <div {% if content.logoSliderTitleMobile %}class="desktop-only" {% endif %}>
  13.                {{ content.title|raw }}
  14.            </div>
  15.         </div>
  16.         {% if content.logoSliderTitleMobile %}
  17.             <div class="logo-slider__title mobile-only" x-ref="mobiletitle">
  18.                 {{ content.logoSliderTitleMobile|raw }}
  19.             </div>
  20.         {% endif %}
  21.         {% if content.text %}
  22.             <div class="logo-slider__text" x-ref="text">
  23.                 {{ content.text|raw }}
  24.             </div>
  25.         {% endif %}
  26.         {% if content.logoSliderActionLink != null %}
  27.             <div class="logo-slider__actions" x-ref="actions">
  28.                 {% if content.logoSliderButtonType == 'box' %}
  29.                     <a href="{{ content.logoSliderActionLink }}"
  30.                        class="button button--{{ content.logoSliderButtonColor }} button--size-{{ content.logoSliderButtonSize }}">
  31.                         <span class="button__inner">
  32.                             {{ content.logoSliderButtonLabel }}
  33.                         </span>
  34.                     </a>
  35.                 {% elseif content.logoSliderButtonType == 'text' %}
  36.                     <a href="{{ content.logoSliderActionLink }}"
  37.                        class="text-button text-button--{{ content.logoSliderTextButtonColor }} {% if content.uppercase %} uppercase {% endif %}">
  38.                         {{ content.logoSliderButtonLabel }}
  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 class="logo-slider__logos">
  49.         <div class="swiper-container" x-ref="swiper">
  50.             <div class="swiper-wrapper">
  51.                 {% for image in content.images %}
  52.                     <div class="swiper-slide">
  53.                         <div class="logo-slider__slide">
  54.                             <img class="logo-slider__logo" src ="{{ image|thumbnailUrl('2880x') }}"
  55.                                  srcset ="{{ image|thumbnailUrl('320x') }} 320w, {{ image|thumbnailUrl('640x') }} 640w, {{ image|thumbnailUrl('1280x') }} 1280w, {{ image|thumbnailUrl('1440x') }} 1440w, {{ image|thumbnailUrl('2048x') }} 2048w"
  56.                                  alt="{{ image.description|striptags }}" x-ref="image" sizes="(min-width: 1440px) 480px, 33vw">
  57.                         </div>
  58.                     </div>
  59.                 {% endfor %}
  60.             </div>
  61.         </div>
  62.     </div>
  63. </div>