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

  1. {% set useCases = useCases(app.request.locale, content.useCaseSliderTags) %}
  2. <div class="use-case-slider {% if content.inverted %}use-case-slider--inverted{% endif %} {{ content.top }} {{ content.bottom }}"
  3.      x-data="usecaseslider">
  4.     <div class="use-case-slider__container">
  5.         {% if content.title %}
  6.             <div class="use-case-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="use-case-slider__lead" x-ref="lead">
  27.                 {{ content.lead|raw }}
  28.             </div>
  29.         {% endif %}
  30.         {% if content.text %}
  31.             <div class="use-case-slider__text" x-ref="text" style="transform: translateY(0em); opacity: 1;">
  32.                 {{ content.text|raw }}
  33.             </div>
  34.         {% endif %}
  35.         <div class="use-case-slider__arrows" x-ref="arrows">
  36.             <div class="use-case-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="use-case-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="use-case-slider__main">
  48.             <div class="swiper-container" x-ref="swiper">
  49.                 <div class="swiper-wrapper">
  50.                     {# make sure we have at least 4 slides to make the infinite loop work #}
  51.                     {% set repetitions = (8 / useCases|length)|round(0, 'ceil') %}
  52.                     {% for i in 1..repetitions %}
  53.                     {% for case in useCases %}
  54.                         <div class="swiper-slide">
  55.                             <div class="use-case-slider-item">
  56.                                 {% set image = sulu_resolve_media(case['image'], app.request.locale|split('_')[0]) %}
  57.                                 <div class="use-case-slider-item__background">
  58.                                     <img class="use-case-slider-item__image" src ="{{ image|thumbnailUrl('640x') }}"
  59.                                          {% if image.description|striptags %}alt="{{ image.description|striptags }}"{% endif %}
  60.                                          sizes="680px">
  61.                                 </div>
  62.                                 <span class="use-case-slider-item__label use-case-slider-item__label--{{ case['topic']['color'] }}">
  63.                                     {{ case['topic']['title'] }}
  64.                                 </span>
  65.                                 <{{ content.useCaseSliderSeoHeadlineSlides ?: 'span' }} class="use-case-slider-item__title{% if case['titleMobile'] %} desktop-only {% endif %}">
  66.                                 {{ case['title'] }}
  67.                                 </{{ content.useCaseSliderSeoHeadlineSlides ?: 'span' }}>
  68.                                 {% if case['titleMobile'] %}
  69.                                     <{{ content.useCaseSliderSeoHeadlineSlides ?: 'span' }} class="use-case-slider-item__title mobile-only">
  70.                                         {{ case['titleMobile']|raw }}
  71.                                     </{{ content.useCaseSliderSeoHeadlineSlides ?: 'span' }}>
  72.                                 {% endif %}
  73.                                 <span class="use-case-slider-item__text">
  74.                                 {{ case['description']|raw }}
  75.                                 </span>
  76.                             </div>
  77.                         </div>
  78.                     {% endfor %}
  79.                     {% endfor %}
  80.                 </div>
  81.             </div>
  82.         </div>
  83.     </div>
  84. </div>