templates/common/_gallery.html.twig line 1

  1. <style>
  2.     .swiper {
  3.         width: 100%;
  4.         height: 800px;
  5.     }
  7.     .swiper-slide {
  8.         text-align: center;
  9.         font-size: 18px;
  10.         background-color: #2b2b2b;
  11.         display: flex;
  12.         justify-content: center;
  13.         align-items: center;
  14.     }
  15.     .swiper-slide img {
  16.         display: block;
  17.         width: 100%;
  18.         height: 100%;
  19.         object-fit: cover;
  20.     }
  21.     .swiper-button-next:after,
  22.     .swiper-button-prev:after{
  23.         font-size: 16px;
  24.         background-color: rgba(255,255,255,.5);
  25.         padding: 20px;
  26.         font-weight: bold;
  27.     }
  28. </style>
  29. <div class="swiper mySwiper">
  30.     <div class="swiper-wrapper">
  31.         {% for img in images %}
  32.             <div class="swiper-slide"
  33.                  style="background-image: url({{ asset(img.filename) }}); background-size: contain; background-repeat: no-repeat;background-position: center center;"></div>
  34.         {% endfor %}
  35.     </div>
  36.     <div class="swiper-button-next"></div>
  37.     <div class="swiper-button-prev"></div>
  38.     <div class="swiper-pagination"></div>
  39. </div>
  41. <!-- Initialize Swiper -->
  42. <script>
  43.     var swiper = new Swiper(".mySwiper", {
  44.         slidesPerView: 1,
  45.         keyboard: {
  46.             enabled: true,
  47.         },
  48.         pagination: {
  49.             el: ".swiper-pagination",
  50.             clickable: true,
  51.         },
  52.         navigation: {
  53.             nextEl: ".swiper-button-next",
  54.             prevEl: ".swiper-button-prev",
  55.         },
  56.         autoplay: {
  57.             delay: 5000,
  58.         },
  59.     });
  60. </script>