Beispiel:Scroll-Snap-1.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:Grundlayout.css">
<title>Bilder-Galerie - 1</title>
<style>
.gallery {
width: 90%;
display: flex;
margin: 2em auto;
padding: 0 1em;
list-style-type: none;
background: skyblue;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-color: steelblue gold;
scrollbar-width: auto;
img {
margin: 1em;
padding: 1em;
border-radius:0.5em;
width: 30em;
aspect-ratio: 4/3;
scroll-snap-align: center;
}
}
::-webkit-scrollbar { width: 14px;}
::-webkit-scrollbar-thumb { background-color: steelblue; border-radius: 14px; border: 3px solid gold;}
::-webkit-scrollbar-track { background: gold;}
</style>
</head>
<body>
<h1>Bilder-Galerie mit <code>scroll-snap</code> <span style="color:#c82f04">ohne</span> JS</h1>
<ul class="gallery">
<li><img src="//wiki.selfhtml.org/images/4/4b/Landscape-1.svg" alt="Landschaft in der Toskana"></li>
<li><img src="//wiki.selfhtml.org/images/d/dc/Landscape-2.svg" alt="Gebirge - Tagsüber"></li>
<li><img src="//wiki.selfhtml.org/images/6/6e/Landscape-2-night.svg" alt="Gebirge - nachts bei Mondschein"></li>
<li><img src="//wiki.selfhtml.org/images/2/2c/Landscape-3-foggy.svg" alt="Abendstimmung am See mit Nebel"></li>
<li><img src="//wiki.selfhtml.org/images/b/b8/Landscape-3-dawn.svg" alt="Morgenstimmung bei Tagesanbruch">
<li><img src="//wiki.selfhtml.org/images/b/b9/Seascape.svg" alt="Unterwasser-Landschaft"></li>
<li><img src="//wiki.selfhtml.org/images/9/93/Landscape-4.svg" alt="Karawane in der Wüste"></li>
<li><img src="//wiki.selfhtml.org/images/3/3a/Landscape-5.svg" alt="Fischer im Abendrot"></li>
<li><img src="//wiki.selfhtml.org/images/3/3b/Landscape-6.svg" alt="Leuchtturm"></li>
</ul>
</body>
</html>
