Beispiel:Scroll-Snap-3.html
Aus SELFHTML-Wiki
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Bilder-Karussell </title> <style> .carousel {
--carousel-width: clamp(0px, 100vw, 60em); width: var(--carousel-width); aspect-ratio: 5 / 3; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
& li {
flex: 0 0 100%;
scroll-snap-align: start;
}
}
@supports selector(::scroll-marker) {
.carousel {
overflow: hidden; /* Bei Support können alle Bilder übereinander gestapelt werden */
anchor-name: --carousel;
scroll-marker-group: after;
&::scroll-button(*) {
position-anchor: --carousel;
position: fixed;
align-self: anchor-center;
width: 1.5em; background: white;
border-radius: 1em;
border: thin solid skyblue;
}
&::scroll-button(*):hover {
background: skyblue; }
&::scroll-button(left) {
content: "⬅︎";
left: calc(anchor(left) + 1em);
}
&::scroll-button(right) {
content: "⮕";
right: calc(anchor(right) + 1em);
}
&::scroll-marker-group {
display: flex;
gap: 1em;
position: fixed;
position-anchor: --carousel;
justify-self: anchor-center;
bottom: calc(anchor(bottom) + 1em);
}
li::scroll-marker {
/* Stylized markers */
content: "";
width: 1em;
aspect-ratio: 1;
background: white;
border-radius: 1em;
border: thin solid skyblue;
}
li::scroll-marker:target-current {
background: skyblue;
}
} }
img {
display: block;
width: 100%; height: 100%; object-fit: cover;
}
.carousel {
margin: 0; padding: 0; list-style: none;
}
- browsersupport span::before {
@supports selector(::scroll-marker) {
content: "unterstützt";
background: rgb(0 255 0 / 30%);
}
@supports not selector(::scroll-marker) {
content: "Nicht unterstützt";
background: rgb(255 0 0 / 30%);
}
}
h1 span { display: block;
margin-inline-start: 7em;
} </style>
</head>
<body>
Bilder-Karussell mit scroll-button()
und scroll-marker-group
<a href="https://caniuse.com/mdn-css_selectors_scroll-marker" target="_blank">Browser Support</a>:
- <img src="https://wiki-test.selfhtml.org/images/4/4b/Landscape-1.svg" alt="Landschaft in der Toskana">
- <img src="https://wiki-test.selfhtml.org/images/d/dc/Landscape-2.svg" alt="Gebirge - Tagsüber">
- <img src="https://wiki-test.selfhtml.org/images/6/6e/Landscape-2-night.svg" alt="Gebirge - nachts bei Mondschein">
- <img src="https://wiki-test.selfhtml.org/images/b/bb/Landscape-3.svg" alt="Abendstimmung am See">
- <img src="https://wiki-test.selfhtml.org/images/b/b9/Seascape.svg" alt="Unterwasser-Landschaft">
</body> </html>
