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