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>
<h1>Bilder-Karussell mit <code>scroll-marker-group</code></h1>

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

<ul class="carousel">
  <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/b/bb/Landscape-3.svg" alt="Abendstimmung am See"></li>
  <li><img src="https://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>
</ul>
</body>
</html>

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