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

Open in your IDE?
  1. <div class="simple-slider-wrapp">
  2.       <div class="simple-slider swiper-container relative overflow-hidden -mx-8 md:mx-0">
  3.         {# Slides #}
  4.         <div class="swiper-wrapper h-[310px] md:h-[550px]">
  5.           {% for slide in content.slider %}
  6.           <div class="simple-slide swiper-slide overflow-hidden !h-full">
  7.             {# Image size 1300*900 #}
  8.             {% if slide|length > 0 %}
  9.             {% set image = slide.thumbnails['1300x900'] %}
  10.             <img class="swiper-lazy w-full h-full object-cover select-none"
  11.               data-src="{{image}}"
  12.               alt="slide"
  13.               data-swiper-parallax-x="90%">
  14.             {% endif %}
  15.             <div class="swiper-lazy-preloader"></div>
  16.           </div>
  17.           {% endfor %}
  18.         </div>
  20.         {# Slide navigation #}
  21.         <button
  22.           class="swiper-button-prev flex items-center pl-2 lg:pl-4 absolute top-0 left-0 bottom-0 z-10 cursor-pointer"
  23.           aria-label="Prev Slide">
  24.           <div
  25.             class="flex items-center justify-center rounded-full bg-white text-[#111] w-[52px] h-[52px] lg:w-14 lg:h-14">
  26.             <svg class="w-6"
  27.               viewBox="0 0 37 14">
  28.               <use xlink:href="#arrow-prev"></use>
  29.             </svg>
  30.           </div>
  31.         </button>
  33.         <button
  34.           class="swiper-button-next flex items-center pr-2 lg:pr-4 absolute top-0 right-0 bottom-0 z-10 cursor-pointer"
  35.           aria-label="Next Slide">
  36.           <div
  37.             class="flex items-center justify-center rounded-full bg-white text-[#111] w-[52px] h-[52px] lg:w-14 lg:h-14">
  38.             <svg class="w-6"
  39.               viewBox="0 0 37 14">
  40.               <use xlink:href="#arrow-next"></use>
  41.             </svg>
  42.           </div>
  43.         </button>
  44.       </div>
  46.       {# Slide description #}
  47.       <p class="simple-slider-description mx-auto mt-5 px-4 max-w-[690px] text-center text-blue opacity-50">
  48.         {{ content.sliderDescription }}
  49.       </p>
  50.     </div>