Beispiel:HTML-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">
<title>CSS Scroll Snap – Horizontale Bildergalerie</title>
<style>
.gallery {
width: 90%;
display: flex;
margin: 2em auto;
padding: 0 1em;
background: #04191b;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; /* Important for iOS devices */
}
.gallery img {
margin: 1em;
padding: 1em;
border-radius:0.5em;
width: 30em;
aspect-ratio: 4/3;
scroll-snap-align: center;
}
body {
max-width:60em;
border: thin dotted;
}
</style>
</head>
<body>
<h1>Bildergalerie mit Scroll Snap <span style="color:#c82f04">ohne</span> JS</h1>
<div id="peru" class="gallery">
<img src="https://wiki.selfhtml.org/images/2/28/Peru-1.jpg" alt="Peru 2007: Cusco - Blick auf Ausangate">
<img src="https://wiki.selfhtml.org/images/4/42/Peru-2.jpg" alt="Peru 2007: Valle Sagrado">
<img src="https://wiki.selfhtml.org/images/a/ab/Peru-3.jpg" alt="Peru 2007: Machu Picchu">
<img src="https://wiki.selfhtml.org/images/8/80/Peru-4.jpg" alt="Peru 2007: Machu Picchu - Lamas in den Ruinen">
<img src="https://wiki.selfhtml.org/images/3/3f/Peru-5.jpg" alt="Peru 2007: Uros-Inseln im Titicaca-See">
<img src="https://wiki.selfhtml.org/images/4/41/Peru-6.jpg" alt="Peru 2007: Ceviche - Meeresfrüchte mit Zitronensaft">
<img src="https://wiki.selfhtml.org/images/2/28/Peru-1.jpg" alt="Peru 2007: Cusco - Blick auf Ausangate">
<img src="https://wiki.selfhtml.org/images/4/42/Peru-2.jpg" alt="Peru 2007: Valle Sagrado">
<img src="https://wiki.selfhtml.org/images/a/ab/Peru-3.jpg" alt="Peru 2007: Machu Picchu">
<img src="https://wiki.selfhtml.org/images/8/80/Peru-4.jpg" alt="Peru 2007: Machu Picchu - Lamas in den Ruinen">
<img src="https://wiki.selfhtml.org/images/3/3f/Peru-5.jpg" alt="Peru 2007: Uros-Inseln im Titicaca-See">
<img src="https://wiki.selfhtml.org/images/4/41/Peru-6.jpg" alt="Peru 2007: Ceviche - Meeresfrüchte mit Zitronensaft">
</div>
</body>
</html>
