templates/includes/blocks/use-case-slider.html.twig line 1

  1. {% set useCases = useCases(app.request.locale) %}
  2. <div class="slider {% if content.inverted %}slider--inverted{% endif %} {{ content.top }} {{ content.bottom }}"
  3.      x-data="slider">
  4.     <div class="slider__container">
  5.         {% if content.title %}
  6.             <div class="slider__title" x-ref="title">
  7.                 {% if content.useCaseSliderPagina %}
  8.                 {% if content.useCaseSliderSeoHeadlinePagina %}<{{ content.useCaseSliderSeoHeadlinePagina }}>{% endif %}
  9.                     <div {% if content.inverted %} style="color: #fff;" {% endif %}
  10.                             class="pagina">
  11.                         {{ content.useCaseSliderPagina }}
  12.                     </div>
  13.                 {% if content.useCaseSliderSeoHeadlinePagina %}</{{ content.useCaseSliderSeoHeadlinePagina }}>{% endif %}
  14.                 {% endif %}
  15.                 <div {% if content.titleMobile %} class="desktop-only" {% endif %}>
  16.                     {{ content.title|raw }}
  17.                 </div>
  18.                 {% if content.titleMobile %}
  19.                     <div class="mobile-only" x-ref="mobiletitle">
  20.                         {{ content.titleMobile|raw }}
  21.                     </div>
  22.                 {% endif %}
  23.             </div>
  24.         {% endif %}
  25.         {% if content.lead %}
  26.             <div class="slider__lead" x-ref="lead">
  27.                 {{ content.lead|raw }}
  28.             </div>
  29.         {% endif %}
  30.         {% if content.text %}
  31.             <div class="slider__text" x-ref="text" style="transform: translateY(0em); opacity: 1;">
  32.                 {{ content.text|raw }}
  33.             </div>
  34.         {% endif %}
  35.         <div class="slider__arrows" x-ref="arrows">
  36.             <div class="slider__prev" x-ref="prev">
  37.                 <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 18 35">
  38.                     <path d="M17.16 34.32V0L0 17.16l17.16 17.16z" fill="currentColor"/>
  39.                 </svg>
  40.             </div>
  41.             <div class="slider__next" x-ref="next">
  42.                 <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 24">
  43.                     <path d="M.066.17v23.202l11.6-11.601L.067.17Z" fill="currentColor"/>
  44.                 </svg>
  45.             </div>
  46.         </div>
  47.         <div class="slider__main">
  48.             <div class="swiper-container" x-ref="swiper">
  49.                 <div class="swiper-wrapper">
  50.                     {% for case in useCases %}
  51.                         <div class="swiper-slide">
  52.                             <div class="slider-card__inner">
  53.                                 {% set image = sulu_resolve_media(case['image'], app.request.locale|split('_')[0]) %}
  54.                                 <div class="slider-card__media">
  55.                                     <img src ="{{ image|thumbnailUrl('2880x') }}"
  56.                                              srcset ="{{ image|thumbnailUrl('320x') }} 320w, {{ image|thumbnailUrl('640x') }} 640w, {{ image|thumbnailUrl('1280x') }} 1280w, {{ image|thumbnailUrl('1440x') }} 1440w, {{ image|thumbnailUrl('2048x') }} 2048w"
  57.                                              alt="{{ image.description|striptags }}" x-ref="image" sizes="(min-width: 1440px) 450px, 50vw">
  58.                                 </div>
  60.                                 <div class="slider-card__content">
  61.                                     <div class="slider-card__topic" style="background: white; padding: 5px; font-size: 16px; color: black;">
  62.                                         {{ case['topic']['title']|raw }}
  63.                                     </div>
  64.                                     <div class="slider-card__title{% if case['titleMobile'] %} desktop-only {% endif %}">
  65.                                         {{ case['title']|raw }}
  66.                                     </div>
  67.                                     {% if case['titleMobile'] %}
  68.                                         <div class="slider-card__title mobile-only">
  69.                                             {{ case['titleMobile']|raw }}
  70.                                         </div>
  71.                                     {% endif %}
  72.                                     <div class="slider-card__text">
  73.                                         {{ case['description']|raw }}
  74.                                     </div>
  75.                                 </div>
  76.                             </div>
  77.                         </div>
  78.                     {% endfor %}
  79.                 </div>
  80.             </div>
  81.         </div>
  82.     </div>
  83. </div>