146 lines
4.8 KiB
Plaintext
146 lines
4.8 KiB
Plaintext
---
|
|
import { Image } from "astro:assets";
|
|
|
|
import type { carouselGroup } from "@interfaces/image-carousel.ts";
|
|
|
|
const groupToShow: carouselGroup = Astro.props.carouselGroup;
|
|
---
|
|
|
|
<custom-carousel
|
|
class="relative flex w-full flex-col"
|
|
data-custom-carousel={groupToShow.animation}
|
|
data-custom-carousel-interval={groupToShow.interval}
|
|
>
|
|
<!-- Modal for fullscreen viewing -->
|
|
<div
|
|
tabindex="-1"
|
|
aria-hidden="true"
|
|
class="fixed inset-0 z-100 hidden w-full items-center justify-center"
|
|
data-custom-carousel-modal
|
|
>
|
|
<div class="relative h-full w-full p-4">
|
|
<!-- Modal content -->
|
|
<div
|
|
class="border-caperren-green relative h-full max-h-screen max-w-screen rounded-lg border-2 bg-black shadow-sm"
|
|
>
|
|
<!-- Modal header -->
|
|
<div class="flex items-center justify-between rounded-t p-1">
|
|
<button
|
|
type="button"
|
|
class="text-caperren-green ring-caperren-green-dark hover:ring-caperren-green-light hover:text-caperren-green-light z-100 ms-auto inline-flex size-8 items-center justify-center rounded-lg bg-transparent text-sm ring-2"
|
|
data-custom-carousel-modal-hide
|
|
>
|
|
<svg
|
|
class="h-3 w-3"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 14 14"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
|
|
</svg>
|
|
<span class="sr-only">Close modal</span>
|
|
</button>
|
|
</div>
|
|
<!-- Modal body -->
|
|
<div
|
|
class="flex h-full w-full items-center justify-center overflow-hidden"
|
|
data-custom-carousel-modal-image
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Carousel wrapper -->
|
|
<div class="relative h-56 w-full overflow-hidden md:h-120">
|
|
{
|
|
groupToShow.images.map((image, index) => (
|
|
<div
|
|
class="hidden duration-1500 ease-in-out"
|
|
data-custom-carousel-item={index}
|
|
>
|
|
<Image
|
|
src={image}
|
|
class="absolute inset-0 m-auto h-full max-h-full w-auto max-w-full object-contain"
|
|
alt="..."
|
|
layout="constrained"
|
|
loading="eager"
|
|
/>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
<!-- Slider indicators -->
|
|
{
|
|
groupToShow.images.length > 1 && (
|
|
<div>
|
|
<div class="absolute bottom-2 left-1/2 z-30 flex -translate-x-1/2 space-x-3 rounded-full">
|
|
{groupToShow.images.map((_, index) => (
|
|
<button
|
|
type="button"
|
|
class="hover:bg-caperren-green-light h-3 w-3 rounded-full bg-black"
|
|
aria-current={index ? "false" : "true"}
|
|
aria-label={index.toString()}
|
|
data-custom-carousel-slide-to={index}
|
|
/>
|
|
))}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="group absolute start-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-none"
|
|
data-custom-carousel-prev
|
|
>
|
|
<span class="ring-caperren-green/25 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/25 ring-2 group-hover:bg-black/75">
|
|
<svg
|
|
class="text-caperren-green group-hover:text-caperren-green-light h-4 w-4"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 6 10"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M5 1 1 5l4 4"
|
|
/>
|
|
</svg>
|
|
<span class="hidden">Previous</span>
|
|
</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="group absolute end-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-none"
|
|
data-custom-carousel-next
|
|
>
|
|
<span class="ring-caperren-green/25 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/25 ring-2 group-hover:bg-black/75">
|
|
<svg
|
|
class="text-caperren-green group-hover:text-caperren-green-light h-4 w-4"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 6 10"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="m1 9 4-4-4-4"
|
|
/>
|
|
</svg>
|
|
<span class="hidden">Next</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
</custom-carousel>
|
|
|
|
<script src="./custom-carousel.ts"></script>
|