gallowelds.com/themes/gallo/layouts/partials/carousel.html

<div class="carousel w-full md:w-2/3 sm:w-1/2 mx-auto">
  <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>
</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>