Beispiel:Scroll-Snap-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Bilder-Karussell </title> <style> .carousel { 

--button-base-color: gold;
--button-accent1-color: skyblue;
--button-accent2-color: steelblue;
--button-accent3-color: navy;		
--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;
   scrollbar-color: var(--button-accent2-color) var(--button-base-color);
   scrollbar-width: auto;
   ::-webkit-scrollbar { width: .5em; }
   ::-webkit-scrollbar-thumb { background-color: var(--button-accent1-color); border-radius: .25em; }
   ::-webkit-scrollbar-track { background: var(--button-base-color); }			

 & 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-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: 1.5em;
   aspect-ratio: 1;
   background: var(--button-base-color);
   border: thin solid var(--button-accent1-color);
   border-radius: 50%;
 }

 li::scroll-marker:target-current {
   background: var(--button-accent1-color);
   border-color: var(--button-accent2-color);
 }
 li::scroll-marker:hover {
   background: var(--button-accent2-color);
   border-color: var(--button-accent3-color);
 }

}

img { display: block; 

 width: 100%;
 height: 100%;
 object-fit: cover;

}


.carousel { 

 margin: 0;
 padding: 0;
 list-style: none;

}

@supports selector(::scroll-marker) { 

 #browsersupport span::before {
   content: "unterstützt";
   background: rgb(0 255 0 / 30%);
 }

}

@supports not selector(::scroll-marker) { 

 #browsersupport span::before {
   content: "Nicht unterstützt";
   background: rgb(255 0 0 / 30%);
 }

}

</style> </head>

<body>

Bilder-Karussell mit scroll-marker-group

<a href="https://caniuse.com/mdn-css_selectors_scroll-marker" target="_blank">Browser Support</a>:

  • <img src="//wiki.selfhtml.org/images/4/4b/Landscape-1.svg" alt="Landschaft in der Toskana">
  • <img src="//wiki.selfhtml.org/images/d/dc/Landscape-2.svg" alt="Gebirge - Tagsüber">
  • <img src="//wiki.selfhtml.org/images/6/6e/Landscape-2-night.svg" alt="Gebirge - nachts bei Mondschein">
  • <img src="//wiki.selfhtml.org/images/2/2c/Landscape-3-foggy.svg" alt="Abendstimmung am See mit Nebel">
  • <img src="//wiki.selfhtml.org/images/b/b8/Landscape-3-dawn.svg" alt="Morgenstimmung bei Tagesanbruch">
  • <img src="//wiki.selfhtml.org/images/b/b9/Seascape.svg" alt="Unterwasser-Landschaft">
  • <img src="//wiki.selfhtml.org/images/9/93/Landscape-4.svg" alt="Karawane in der Wüste">
  • <img src="//wiki.selfhtml.org/images/3/3a/Landscape-5.svg" alt="Fischer im Abendrot">

</body> </html>

Abgerufen am 2.01.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Scroll-Snap-3.html"