Files
frontpage/src/components/bits/SlideContainer.astro
2026-02-20 09:03:47 +01:00

34 lines
862 B
Plaintext

---
interface Props {
anchorLink: string;
background?: string;
bgImageUrl?: string;
}
const { anchorLink, background, bgImageUrl } = Astro.props;
const backgroundColor =background ?? "transparent";
const backgroundImage = bgImageUrl ? `url(${bgImageUrl})` : "none";
---
<section class="slide-container" id={"slide-" + anchorLink}>
<slot name="main-slide" />
<slot />
</section>
<style define:vars={{ backgroundColor, backgroundImage }}>
.slide-container {
background-color: var(--backgroundColor);
background-image: var(--backgroundImage);
width: 100dvw;
height: 100dvh;
display: flex;
flex-direction: row;
align-items: start;
justify-content: start;
scroll-snap-type: x mandatory;
scroll-snap-align: start;
overflow-x: auto;
flex-shrink: 0;
}
</style>