templates/includes/blocks/simpleSliderProject.html.twig line 1

Open in your IDE?
  1. <section class="relative bg-white text-blue pt-32 lg:pt-52 pb-6 lg:pb-16" section-shade="light">
  2.   <div class="big-container">
  3.     {# Top info #}
  4.     <div class="flex flex-col gap-6 lg:flex-row justify-between">
  6.       {# Content #}
  7.       <div class="flex flex-col lg:w-10/12 xl:w-9/12 max-w-[930px]">
  9.         <h1 class="title text-[2.5rem] lg:text-6xl xl:text-7xl mt-6">{{content.Title}}</h1>
  11.       </div>
  14.     </div>
  15.   </div>
  16. </section>
  18. <section class="gallery-section h-80 md:h-96 lg:min-h-[650px] lg:h-[85vh]" fade fade-trigger="none">
  19.   <div class="big-container-mob-zero h-full">
  20.     <div class="gallery-slider swiper-container relative md:overflow-hidden h-full">
  21.       <div class="gallery-slider-wrapper swiper-wrapper">
  23.         {% for photo in content.Images %}
  25.           {% if photo|length > 0 %}
  26.               {% set image = photo.thumbnails['1920x1080'] %}
  27.           {% else %}
  28.               {% set image = '' %}
  29.           {% endif %}
  31.           <div class="gallery-slide swiper-slide"
  32.              data-src="{{image}}"
  33.                data-external-thumb-image="{{image}}"
  34.              >
  35.             {# Image size 1920*1080 #}
  37.             <img class="swiper-lazy w-full h-full object-cover select-none"
  38.                data-src="{{image}}"
  39.                data-external-thumb-image="{{image}}"
  40.                alt="{{content.heroSectionTitle}}">
  42.             <div class="swiper-lazy-preloader"></div>
  43.           </div>
  45.         {% endfor %}
  47.       </div>
  48.       <button class="swiper-button-prev flex items-center pl-2 lg:pl-4 absolute top-0 left-0 bottom-0 z-10 cursor-pointer" aria-label="Prev Slide">
  49.         <div class="flex items-center justify-center rounded-full bg-white text-[#111] w-[52px] h-[52px] lg:w-14 lg:h-14">
  50.           <svg class="w-6" viewBox="0 0 37 14">
  51.             <use xlink:href="#arrow-prev"></use>
  52.           </svg>
  53.         </div>
  54.       </button>
  56.       <button class="swiper-button-next flex items-center pr-2 lg:pr-4 absolute top-0 right-0 bottom-0 z-10 cursor-pointer" aria-label="Next Slide">
  57.         <div class="flex items-center justify-center rounded-full bg-white text-[#111] w-[52px] h-[52px] lg:w-14 lg:h-14">
  58.           <svg class="w-6" viewBox="0 0 37 14">
  59.             <use xlink:href="#arrow-next"></use>
  60.           </svg>
  61.         </div>
  62.       </button>
  64.       <div class="gallery-count-wrapp absolute bottom-0 md:bottom-6 left-1/2 -translate-x-1/2 translate-y-1/2 md:translate-y-0 bg-[#111] text-sm text-white rounded-full flex items-center px-4 py-2 z-10 opacity-0">
  65.         <span class="gallery-count__current"></span>
  66.         <span class="opacity-30">&#160;/&#160;</span>
  67.         <span class="gallery-count__all opacity-30"></span>
  68.       </div>
  69.     </div>
  70.   </div>
  71. </section>