Beispiel:HTML-Scroll-Snap-1.html
<!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>
Bildergalerie mit Scroll Snap ohne JS
<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">
</body> </html>
