69 lines
2.3 KiB
HTML
69 lines
2.3 KiB
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-white p-1 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"
|
||
|
|
>
|
||
|
|
<
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
class="absolute top-1/2 right-4 transform -translate-y-1/2 text-white p-1 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"
|
||
|
|
>
|
||
|
|
>
|
||
|
|
</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>
|