update
This commit is contained in:
egnbkts committed
1 parent
574e07603d
commit
cc2b84dcad
27 files changed
+2214
-360
No files matched your search
@@ -0,0 +1,197 @@
|
||||
/* ==========================================================
|
||||
Mobile First Basis-Styles (< 768px)
|
||||
========================================================== */
|
||||
|
||||
.slider {
|
||||
/* Slide-Abstand zentral als Variable, pro Breakpoint überschreibbar */
|
||||
--slide-spacing: 1rem;
|
||||
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
overflow: hidden;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
touch-action: pan-y pinch-zoom;
|
||||
/* Kompensiert das padding-left des ersten Slides, damit dieser
|
||||
bündig am linken Rand des Viewports beginnt. */
|
||||
margin-left: calc(var(--slide-spacing) * -1);
|
||||
}
|
||||
|
||||
.slide {
|
||||
flex: 0 0 100%;
|
||||
min-width: 0;
|
||||
/* Erzeugt den sichtbaren Abstand zum vorherigen Slide.
|
||||
Padding statt margin, weil Embla SSR nur bei padding-basiertem
|
||||
Spacing zuverlässig unterstützt. */
|
||||
padding-left: var(--slide-spacing);
|
||||
}
|
||||
|
||||
/* Mobil: gestapelt, Bild oben, Text darunter */
|
||||
.split {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.imagePanel {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
height: 230px;
|
||||
order: -1;
|
||||
overflow: hidden;
|
||||
border-top-left-radius: 24px;
|
||||
border-top-right-radius: 24px;
|
||||
}
|
||||
|
||||
.image {
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.textPanel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
min-width: 0;
|
||||
min-height: 220px;
|
||||
padding: 1.5rem;
|
||||
color: #fff;
|
||||
background:
|
||||
radial-gradient(circle at 5% 0%, rgb(117 211 193 / 58%), transparent 49%),
|
||||
linear-gradient(135deg, #42ac99 0%, var(--color-accent) 80%);
|
||||
border-bottom-left-radius: 24px;
|
||||
border-bottom-right-radius: 24px;
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: #f9f9f9;
|
||||
padding: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 0;
|
||||
line-height: var(--line-height-card);
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.arrow:hover:not(:disabled) {
|
||||
background: #242424;
|
||||
}
|
||||
|
||||
.arrow:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: #b8b8b8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dotActive {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.arrow:focus-visible,
|
||||
.dot:focus-visible {
|
||||
outline: 3px solid #177f73;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
/* ==========================================================
|
||||
Tablet (>= 768px): zurück zum Split-Layout, Text links / Bild rechts
|
||||
========================================================== */
|
||||
@media (min-width: 768px) {
|
||||
.slider {
|
||||
--slide-spacing: 1.5rem;
|
||||
}
|
||||
|
||||
.split {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
.imagePanel {
|
||||
height: 360px;
|
||||
order: 0;
|
||||
border-top-right-radius: 24px;
|
||||
border-bottom-right-radius: 24px;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.textPanel {
|
||||
min-height: 0;
|
||||
padding: clamp(1.5rem, 3vw, 3rem);
|
||||
border-top-left-radius: 24px;
|
||||
border-bottom-left-radius: 24px;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================
|
||||
Desktop (>= 1024px): finale Maße wie im Ursprungsdesign
|
||||
========================================================== */
|
||||
@media (min-width: 1024px) {
|
||||
.slider {
|
||||
width: 992px;
|
||||
--slide-spacing: 2rem;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.split {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.imagePanel {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.textPanel {
|
||||
padding: clamp(2rem, 4vw, 4.75rem);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import useEmblaCarousel from "embla-carousel-react";
|
||||
import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react/dist/ssr";
|
||||
import styles from "./Slider.module.css";
|
||||
|
||||
type Slide = {
|
||||
heading: string;
|
||||
text: string;
|
||||
image: string;
|
||||
};
|
||||
|
||||
type SliderProps = {
|
||||
slides: Slide[];
|
||||
imageAlt: string;
|
||||
};
|
||||
|
||||
export function Slider({ slides, imageAlt }: SliderProps) {
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel({
|
||||
align: "start",
|
||||
loop: false,
|
||||
duration: 28,
|
||||
});
|
||||
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
|
||||
const [canScrollPrev, setCanScrollPrev] = useState(false);
|
||||
const [canScrollNext, setCanScrollNext] = useState(false);
|
||||
|
||||
const scrollPrevious = useCallback(() => {
|
||||
emblaApi?.scrollPrev();
|
||||
}, [emblaApi]);
|
||||
|
||||
const scrollNext = useCallback(() => {
|
||||
emblaApi?.scrollNext();
|
||||
}, [emblaApi]);
|
||||
|
||||
const scrollTo = useCallback(
|
||||
(index: number) => {
|
||||
emblaApi?.scrollTo(index);
|
||||
},
|
||||
[emblaApi],
|
||||
);
|
||||
|
||||
const updateSelectedSlide = useCallback(() => {
|
||||
if (!emblaApi) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedIndex(emblaApi.selectedScrollSnap());
|
||||
setCanScrollPrev(emblaApi.canScrollPrev());
|
||||
setCanScrollNext(emblaApi.canScrollNext());
|
||||
}, [emblaApi]);
|
||||
|
||||
const initializeNavigation = useCallback(() => {
|
||||
if (!emblaApi) {
|
||||
return;
|
||||
}
|
||||
|
||||
setScrollSnaps(emblaApi.scrollSnapList());
|
||||
updateSelectedSlide();
|
||||
}, [emblaApi, updateSelectedSlide]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) {
|
||||
return;
|
||||
}
|
||||
|
||||
initializeNavigation();
|
||||
|
||||
emblaApi.on("reInit", initializeNavigation);
|
||||
emblaApi.on("select", updateSelectedSlide);
|
||||
|
||||
return () => {
|
||||
emblaApi.off("reInit", initializeNavigation);
|
||||
emblaApi.off("select", updateSelectedSlide);
|
||||
};
|
||||
}, [emblaApi, initializeNavigation, updateSelectedSlide]);
|
||||
|
||||
if (slides.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<section
|
||||
className={styles.slider}
|
||||
aria-roledescription="carousel"
|
||||
aria-label="Weitere Informationen"
|
||||
>
|
||||
<div className={styles.viewport} ref={emblaRef}>
|
||||
<div className={styles.container}>
|
||||
{slides.map((slide, index) => (
|
||||
<article
|
||||
key={`${slide.heading}-${index}`}
|
||||
className={styles.slide}
|
||||
aria-hidden={selectedIndex !== index}
|
||||
>
|
||||
<div className={styles.split}>
|
||||
<div className={styles.textPanel}>
|
||||
<h3 className={styles.heading}>{slide.heading}</h3>
|
||||
<p className={styles.text}>{slide.text}</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.imagePanel}>
|
||||
<Image
|
||||
src={slide.image}
|
||||
alt={imageAlt}
|
||||
fill
|
||||
sizes="(max-width: 700px) 100vw, 50vw"
|
||||
className={styles.image}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{slides.length > 1 && (
|
||||
<div className={styles.controls}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.arrow}
|
||||
onClick={scrollPrevious}
|
||||
disabled={!canScrollPrev}
|
||||
suppressHydrationWarning
|
||||
aria-label="Vorheriger Slide"
|
||||
>
|
||||
<CaretLeftIcon size={20} weight="bold" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<div className={styles.dots} aria-label="Slide auswählen">
|
||||
{scrollSnaps.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
type="button"
|
||||
className={`${styles.dot} ${
|
||||
selectedIndex === index ? styles.dotActive : ""
|
||||
}`}
|
||||
onClick={() => scrollTo(index)}
|
||||
aria-label={`Slide ${index + 1} von ${slides.length}`}
|
||||
aria-current={selectedIndex === index ? "true" : undefined}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={styles.arrow}
|
||||
onClick={scrollNext}
|
||||
disabled={!canScrollNext}
|
||||
suppressHydrationWarning
|
||||
aria-label="Nächster Slide"
|
||||
>
|
||||
<CaretRightIcon size={20} weight="bold" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user