templates/elements2024/swiper_slider.html.twig line 1

Open in your IDE?
  1. {% import 'elements2024/macros/buttons.html.twig' as buttons %}
  3. {% if slides|length > 0 %}
  5.     <div class="swiper slider-4 relative mt-16 !overflow-visible">
  6.         <div class="swiper-wrapper" batch-children>
  7.             {% for slide in slides %}
  8.                 <div class="swiper-slide group">
  9.                     <div big-fade fade-trigger="batch">
  10.                         <div class="relative aspect-[1.325/1] rounded overflow-hidden">
  12.                             {% if slide.photos and slide.photos|length > 0 %}
  13.                                 <img class="img-cover group-hover:scale-110 duration-500" src="{{ asset('/property-images/'~slide.photos[0].path) | imagine_filter('436x301') }}" srcset="{{ asset('/property-images/'~slide.photos[0].path) | imagine_filter('873x603') }} 2x" alt="" loading="lazy">
  14.                             {% endif %}
  16.                             <div class="absolute top-4 left-4 flex items-center gap-2 text-xs bg-white rounded pl-2 pr-4 py-2">
  17.                                 <svg class="w-4 h-4" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  18.                                     <path d="M7.66622 1.6175L2.62531 2.62568L1.61713 7.66658C1.60099 7.7473 1.60502 7.83075 1.62888 7.90953C1.65273 7.98832 1.69566 8.05999 1.75387 8.1182L8.28217 14.6465C8.3286 14.6929 8.38372 14.7298 8.44438 14.7549C8.50504 14.78 8.57006 14.7929 8.63572 14.7929C8.70138 14.7929 8.7664 14.78 8.82706 14.7549C8.88773 14.7298 8.94284 14.6929 8.98927 14.6465L14.6461 8.98964C14.6926 8.94321 14.7294 8.88809 14.7545 8.82743C14.7796 8.76677 14.7926 8.70175 14.7926 8.63609C14.7926 8.57043 14.7796 8.50541 14.7545 8.44475C14.7294 8.38408 14.6926 8.32896 14.6461 8.28253L8.11783 1.75424C8.05962 1.69603 7.98795 1.6531 7.90917 1.62924C7.83039 1.60539 7.74693 1.60135 7.66622 1.6175V1.6175Z" stroke="#0A0A0A" stroke-linecap="round" stroke-linejoin="round"/>
  19.                                     <path d="M5.25 6C5.66421 6 6 5.66421 6 5.25C6 4.83579 5.66421 4.5 5.25 4.5C4.83579 4.5 4.5 4.83579 4.5 5.25C4.5 5.66421 4.83579 6 5.25 6Z" fill="#0A0A0A"/>
  20.                                 </svg>
  22.                                 <span>{{ slide.reference }}</span>
  23.                             </div>
  25.                             <a class="absolute inset-0" href="{{ path(detailPath, { encodedTitle: slide.url }) }}">
  26.                                 <span class="sr-only">{{ slide.name }}</span>
  27.                             </a>
  28.                         </div>
  30.                         <div class="flex gap-2 text-xs mt-4">
  31.                             {% if slide.district %}
  32.                                 <div class="flex items-center gap-2 text-xs bg-white rounded pl-2 pr-4 py-2">
  33.                                     <svg class="w-4 h-4" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  34.                                         <path d="M8 8.5C9.10457 8.5 10 7.60457 10 6.5C10 5.39543 9.10457 4.5 8 4.5C6.89543 4.5 6 5.39543 6 6.5C6 7.60457 6.89543 8.5 8 8.5Z" stroke="#1E713F" stroke-linecap="round" stroke-linejoin="round"/>
  35.                                         <path d="M13 6.5C13 11 8 14.5 8 14.5C8 14.5 3 11 3 6.5C3 5.17392 3.52678 3.90215 4.46447 2.96447C5.40215 2.02678 6.67392 1.5 8 1.5C9.32608 1.5 10.5979 2.02678 11.5355 2.96447C12.4732 3.90215 13 5.17392 13 6.5V6.5Z" stroke="#1E713F" stroke-linecap="round" stroke-linejoin="round"/>
  36.                                     </svg>
  38.                                     <span>
  39.                                         {{ slide.district.getFr }}
  40.                                     </span>
  41.                                 </div>
  42.                             {% endif %}
  44.                             {% if slide.price is defined and slide.price %}
  45.                                 <div class="bg-white rounded px-4 py-2">CHF {{ slide.price|number_format(0, '.', "'") }}.-</div>
  46.                             {% endif %}
  47.                         </div>
  49.                         <div class="text-sm mb-2">{# slide.agency_reference #}</div>
  51.                         <h3 class="p-lg text-white font-freight-neo-pro mb-2 hover:underline">
  52.                             <a href="{{ path(detailPath, { encodedTitle: slide.url }) }}">{{ slide.name }}</a>
  53.                         </h3>
  54.                     </div>
  55.                 </div>
  56.             {% endfor %}
  57.         </div>
  59.         {# Prev button #}
  60.         <div class="swiper-btn-prev-wrapp">
  61.             {{ buttons.sliderPrev(true) }}
  62.         </div>
  64.         {# Next button #}
  65.         <div class="swiper-btn-next-wrapp">
  66.             {{ buttons.sliderNext(true) }}
  67.         </div>
  68.     </div>
  70. {% endif %}