templates/includes/block-types/gallery.html.twig line 1

  1. {% set carouselId = random() %}
  2. <div id="carousel{{carouselId}}" class="carousel slide relative w-full" data-bs-ride="carousel">
  3.   <div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4">
  4.     {% for image in content.images %}
  5.         <button
  6.             type="button"
  7.             data-bs-target="#carousel{{carouselId}}"
  8.             data-bs-slide-to="{{loop.index0}}"
  9.             class="{{ loop.first ? "active" : ""}}"
  10.             aria-current="{{ loop.first ? "true" : "false"}}"
  11.             aria-label="Slide {{loop.index}}"
  12.         ></button>
  13.     {% endfor %}
  14.   </div>
  15.   <div class="carousel-inner relative w-full h-full overflow-hidden">
  16.     {% for image in content.images %}
  17.             <div class="carousel-item {{ loop.first ? "active" : ""}} relative float-left w-full">
  18.                 <div class="relative overflow-hidden">
  19.                     <img src="{{ image.formats['x500'] }}" alt="{{ image.title }}" class="w-full h-96 object-cover object-center" />
  20.                 </div>
  21.             </div>
  22.     {% endfor %}
  23.   </div>
  24.   <button
  25.     class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0"
  26.     type="button"
  27.     data-bs-target="#carousel{{carouselId}}"
  28.     data-bs-slide="prev"
  29.   >
  30.     <span class="carousel-control-prev-icon inline-block bg-no-repeat" aria-hidden="true"></span>
  31.     <span class="visually-hidden">Previous</span>
  32.   </button>
  33.   <button
  34.     class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0"
  35.     type="button"
  36.     data-bs-target="#carousel{{carouselId}}"
  37.     data-bs-slide="next"
  38.   >
  39.     <span class="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true"></span>
  40.     <span class="visually-hidden">Next</span>
  41.   </button>
  42. </div>