Corwin Perren
ffbc3beaf7
Some checks failed
Build and Test - Staging / determine_version (pull_request) Successful in 8m25s
Build and Test - Staging / test (pull_request) Has been cancelled
Build and Test - Staging / deploy_staging (pull_request) Has been cancelled
Build and Test - Staging / build_and_push (pull_request) Has been cancelled
96 lines
3.9 KiB
Plaintext
96 lines
3.9 KiB
Plaintext
---
|
|
import {Image} from 'astro:assets';
|
|
|
|
import type {carouselGroup} from "@interfaces/image-carousel.ts";
|
|
|
|
const groupToShow: carouselGroup = Astro.props.carouselGroup;
|
|
|
|
const limitByHeightClasses = "sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl";
|
|
const limitByWidthClasses = "max-h-fit";
|
|
---
|
|
|
|
<custom-carousel class="flex flex-col relative w-full"
|
|
data-custom-carousel={groupToShow.animation}
|
|
data-custom-carousel-interval={groupToShow.interval}>
|
|
|
|
<!-- 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"/> |