<div class="rounded-md relative overflow-hidden pt-[100%]">
  <div
    class="carousel-wrapper flex transition-transform duration-300 ease-in-out absolute inset-0"
  >
    {{ range .gallery }}
    <div
      class="carousel-item flex-shrink-0 w-full h-full flex items-center justify-center"
    >
      <img
        loading="lazy"
        class="rounded-lg w-full h-auto object-contain"
        src="{{ .image }}"
      />
    </div>
    {{ end }}
  </div>

  <button
    class="absolute top-1/2 left-4 transform -translate-y-1/2 text-xl sm:text-md text-white p-2 px-4 sm:p-1 sm:px-3 rounded-xl font-extrabold carousel-prev z-20 bg-black hover:bg-gray-800 focus:outline-none active:ring-2 active:ring-offset-2 active:ring-black"
  >
    &lt;
  </button>
  <button
    class="absolute top-1/2 right-4 transform -translate-y-1/2 text-xl sm:text-md text-white p-2 px-4 sm:p-1 sm:px-3 rounded-xl font-extrabold carousel-next z-20 bg-black hover:bg-gray-800 focus:outline-none active:ring-2 active:ring-offset-2 active:ring-black"
  >
    &gt;
  </button>

  <div
    class="absolute text-xs right-2 bottom-2 transform text-black bg-white p-1 px-2 rounded-md carousel-indicator z-10"
  >
    1 / {{ len .gallery }}
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const carousels = document.querySelectorAll(".carousel");

    carousels.forEach((carousel) => {
      const wrapper = carousel.querySelector(".carousel-wrapper");
      const items = wrapper.querySelectorAll(".carousel-item");
      const totalItems = items.length;
      let currentIndex = 0;

      const updateIndicator = () => {
        const indicator = carousel.querySelector(".carousel-indicator");
        indicator.textContent = `${currentIndex + 1} / ${totalItems}`;
      };

      const showSlide = (index) => {
        currentIndex = (index + totalItems) % totalItems;
        wrapper.style.transform = `translateX(-${currentIndex * 100}%)`;
        updateIndicator();
      };

      const prevButton = carousel.querySelector(".carousel-prev");
      const nextButton = carousel.querySelector(".carousel-next");

      prevButton.addEventListener("click", () => showSlide(currentIndex - 1));
      nextButton.addEventListener("click", () => showSlide(currentIndex + 1));

      updateIndicator();
    });
  });
</script>