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

  1. <div class="slider {% if content.inverted %}slider--inverted{% endif %} {{ content.top }} {{ content.bottom }}"
  2.      x-data="slider">
  3.     <div class="slider__container">
  4.         {% if content.title %}
  5.             <div class="slider__title" x-ref="title">
  6.                 {% if content.caseSliderPagina %}
  7.                 {% if content.caseSliderSeoHeadlinePagina %}<{{ content.caseSliderSeoHeadlinePagina }}>{% endif %}
  8.                     <div {% if content.inverted %} style="color: #fff;" {% endif %}
  9.                             class="pagina">
  10.                         {{ content.caseSliderPagina }}
  11.                     </div>
  12.                 {% if content.caseSliderSeoHeadlinePagina %}</{{ content.caseSliderSeoHeadlinePagina }}>{% endif %}
  13.                 {% endif %}
  14.                 <div {% if content.titleMobile %} class="desktop-only" {% endif %}>
  15.                     {{ content.title|raw }}
  16.                 </div>
  17.                 {% if content.titleMobile %}
  18.                     <div class="mobile-only" x-ref="mobiletitle">
  19.                         {{ content.titleMobile|raw }}
  20.                     </div>
  21.                 {% endif %}
  22.             </div>
  23.         {% endif %}
  24.         {% if content.lead %}
  25.             <div class="slider__lead" x-ref="lead">
  26.                 {{ content.lead|raw }}
  27.             </div>
  28.         {% endif %}
  29.         {% if content.text %}
  30.             <div class="slider__text" x-ref="text" style="transform: translateY(0em); opacity: 1;">
  31.                 {{ content.text|raw }}
  32.             </div>
  33.         {% endif %}
  34.         <div class="slider__actions" x-ref="actions">
  35.             {% if content.caseSliderActionLink != null %}
  36.                 <div class="slider__actions-inner">
  37.                     {% if content.caseSliderButtonType == 'box' %}
  38.                         <a href="{{ content.caseSliderActionLink }}"
  39.                            class="button button--{{ content.caseSliderButtonColor }} button--size-{{ content.caseSliderButtonSize }}">
  40.                         <span class="button__inner">
  41.                             {{ content.label }}
  42.                         </span>
  43.                         </a>
  44.                     {% elseif content.caseSliderButtonType == 'text' %}
  45.                         <a href="{{ content.caseSliderActionLink }}"
  46.                            class="text-button text-button--{{ content.caseSliderTextButtonColor }} {% if content.uppercase %} uppercase {% endif %}">
  47.                             {{ content.label }}
  48.                             <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16">
  49.                                 <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  50.                                       stroke-linecap="round" stroke-linejoin="round"/>
  51.                             </svg>
  52.                         </a>
  53.                     {% endif %}
  54.                 </div>
  55.             {% endif %}
  56.         </div>
  57.         <div class="slider__arrows" x-ref="arrows">
  58.             <div class="slider__prev" x-ref="prev">
  59.                 <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 18 35">
  60.                     <path d="M17.16 34.32V0L0 17.16l17.16 17.16z" fill="currentColor"/>
  61.                 </svg>
  62.             </div>
  63.             <div class="slider__next" x-ref="next">
  64.                 <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 24">
  65.                     <path d="M.066.17v23.202l11.6-11.601L.067.17Z" fill="currentColor"/>
  66.                 </svg>
  67.             </div>
  68.         </div>
  69.         <div class="slider__main">
  70.             <div class="swiper-container" x-ref="swiper">
  71.                 <div class="swiper-wrapper">
  72.                     {% for case in content.cases %}
  73.                         <div class="swiper-slide">
  74.                             <a href="{{ sulu_content_path(case.url) }}" class="slider-card">
  75.                                 <div class="slider-card__inner">
  76.                                     <div class="slider-card__media {% if case.caseSliderImageMobile != null %}
  77.                                                  desktop-only {% endif %}">
  78.                                         {% if case.caseSliderImageDesktop %}
  79.                                             {% set imageDesktop=case.caseSliderImageDesktop %}
  80.                                             <img src ="{{ imageDesktop|thumbnailUrl('2880x') }}"
  81.                                                  srcset ="{{ imageDesktop|thumbnailUrl('320x') }} 320w, {{ imageDesktop|thumbnailUrl('640x') }} 640w, {{ imageDesktop|thumbnailUrl('1280x') }} 1280w, {{ imageDesktop|thumbnailUrl('1440x') }} 1440w, {{ imageDesktop|thumbnailUrl('2048x') }} 2048w"
  82.                                                  alt="{{ case.caseSliderImageDesktopALT|default(imageDesktop.description|striptags) }}" x-ref="image" sizes="(min-width: 1440px) 450px, 50vw">
  83.                                         {% endif %}
  84.                                     </div>
  85.                                         {% if case.caseSliderImageMobile != null %}
  86.                                             {% set imageMobile=case.caseSliderImageMobile %}
  87.                                                 <div class="slider-card__media mobile-only">
  88.                                                    <img src ="{{ imageMobile|thumbnailUrl('2880x') }}"
  89.                                                     srcset ="{{ imageMobile|thumbnailUrl('320x') }} 320w, {{ imageMobile|thumbnailUrl('640x') }} 640w, {{ imageMobile|thumbnailUrl('1280x') }} 1280w, {{ imageMobile|thumbnailUrl('1440x') }} 1440w, {{ imageMobile|thumbnailUrl('2048x') }} 2048w"
  90.                                                     alt="{{ case.caseSliderImageMobileALT|default(imageMobile.description|striptags) }}" x-ref="image" sizes="(min-width: 1440px) 450px, 50vw">
  91.                                                 </div>
  92.                                         {% endif %}
  94.                                     <div class="slider-card__content">
  95.                                         <div class="slider-card__title{% if case.caseTitleSliderMobile %} desktop-only {% endif %}">
  96.                                             {{ case.caseTitleSliderDesktop|raw }}
  97.                                         </div>
  98.                                         {% if case.caseTitleSliderMobile %}
  99.                                             <div class="slider-card__title mobile-only">
  100.                                                 {{ case.caseTitleSliderMobile|raw }}
  101.                                             </div>
  102.                                         {% endif %}
  103.                                         <div class="slider-card__text">
  104.                                             {{ case.caseDescriptionSlider|raw }}
  105.                                         </div>
  106.                                         {% if case.caseCustomerImage %}
  107.                                             <img src ="{{ case.caseCustomerImage|thumbnailUrl('320x') }}" sizes="200px"
  108.                                                  {% if case.caseCustomerImage.description|striptags %}alt="{{ case.caseCustomerImage.description|striptags }}"{% endif %}
  109.                                                  class="slider-card__customer">
  110.                                         {% endif %}
  111.                                     </div>
  112.                                 </div>
  113.                             </a>
  114.                         </div>
  115.                     {% endfor %}
  116.                 </div>
  117.             </div>
  118.         </div>
  119.     </div>
  120. </div>