Erstellen von CSS-Karussells

Karussells sind eine häufige Funktion im Web. Sie nehmen typischerweise die Form eines scrollbaren Inhaltsbereichs an, der mehrere Elemente enthält, wie z. B. Präsentationsfolien, Anzeigen, Schlagzeilen oder wichtige Produkteigenschaften.

Benutzer können durch die Elemente navigieren, indem sie Navigationsschaltflächen anklicken oder aktivieren oder durch Wischen. Die Navigation umfasst in der Regel:

Scroll-Schaltflächen

Im Allgemeinen "vorherige" und "nächste" Schaltflächen oder Links.

Scroll-Markierungen

Eine Reihe von Schaltflächen- oder Link-Icons, die jeweils ein oder mehrere Elemente repräsentieren, abhängig davon, wie viele Elemente an jeder Scroll-Position im Karussell angezeigt werden.

Ein wesentliches Merkmal von Karussells ist die Paginierung — die Elemente wirken wie separate Inhalte, zwischen denen gewechselt wird, anstatt einen kontinuierlichen Abschnitt zu bilden. Sie können ein Element gleichzeitig oder mehrere Elemente auf jeder Karussell-"Seite" anzeigen. Wenn mehrere Elemente sichtbar sind, können Sie jedes Mal eine völlig neue Gruppe von Elementen anzeigen, wenn die Schaltfläche "nächste" oder "vorherige" gedrückt wird. Alternativ können Sie ein neues Element an einem Ende der Liste hinzufügen, während das Element am anderen Ende aus dem Blickfeld verschoben wird.

Das Erstellen von Karussells mit JavaScript kann recht anfällig und schwierig umzusetzen sein. Sie erfordern Skripte, um Scroll-Markierungen mit den von ihnen repräsentierten Elementen zu verknüpfen, während die Scroll-Schaltflächen kontinuierlich aktualisiert werden müssen, um sie korrekt funktionsfähig zu halten. Wenn Karussells mit JavaScript erstellt werden, muss die Zugänglichkeit des Karussells und der zugehörigen Steuerungen hinzugefügt werden.

Glücklicherweise können wir zugängliche Karussells mit zugehörigen Steuerungen ohne den Einsatz von JavaScript erstellen, indem wir die CSS-Karussell-Funktionen verwenden.

Die CSS-Karussell-Funktionen bieten Pseudo-Elemente und Pseudo-Klassen, die das Erstellen von Karussells nur mit CSS und HTML ermöglichen, wobei der Browser den Großteil des Scrollens und der Link-Referenzen auf zugängliche, flexible und konsistente Weise übernimmt. Diese Funktionen sind wie folgt:

::scroll-button()

Innerhalb eines Scroll-Containers generiert, repräsentieren diese Pseudo-Elemente Scroll-Schaltflächen, die den Container in eine bestimmte Richtung scrollen.

::scroll-marker-group

Innerhalb eines Scroll-Containers generiert; wird verwendet, um Scroll-Markierungen zusammenzufassen und anzuordnen.

::scroll-marker

Innerhalb der Kinder eines Scroll-Container-Vorfahren oder innerhalb der Spalten eines Scroll-Containers generiert, um ihre Scroll-Markierungen darzustellen. Diese können ausgewählt werden, um den Container zu seinen zugehörigen Kindelementen oder Spalten zu scrollen, und werden zur Layout-Zwecken innerhalb der ::scroll-marker-group des Scroll-Containers gesammelt.

:target-current

Diese Pseudo-Klasse kann verwendet werden, um die aktuell aktive Scroll-Markierung auszuwählen. Sie kann verwendet werden, um einen Hervorhebungsstil für die aktuell aktive Markierung bereitzustellen, was wichtig für die Benutzerfreundlichkeit und Zugänglichkeit ist.

::column

Dieses Pseudo-Element repräsentiert die einzelnen Spalten, die generiert werden, wenn ein Container so eingestellt ist, dass er seine Inhalte in mehreren Spalten über das CSS-Multi-Column-Layout anzeigt. Es kann in Verbindung mit ::scroll-marker verwendet werden, um eine Scroll-Markierung für jede Spalte zu generieren.

Unser erstes Beispiel ist ein Karussell mit Einzelseiten, wobei jedes Element die gesamte Seite einnimmt. Wir haben Scroll-Markierungen als untere Navigation und Scroll-Schaltflächen an den Seiten der Seite, die dem Benutzer ermöglichen, zu den nächsten und vorherigen Seiten zu wechseln.

Wir verwenden flexbox, um das Karussell anzuordnen, Scroll-Snapping, um eine klare Paginierung zu erzwingen, und Ankerpositionierung, um die Scroll-Schaltflächen und Scroll-Markierungen relativ zum Karussell zu positionieren.

Das HTML besteht aus einem Überschriftselement und einer ungeordneten Liste, wobei jedes Listenelement einige Beispielinhalte enthält:

<h1>CSS carousel single item per page</h1>
<ul>
  <li>
    <h2>Page 1</h2>
  </li>
  <li>
    <h2>Page 2</h2>
  </li>
  <li>
    <h2>Page 3</h2>
  </li>
  <li>
    <h2>Page 4</h2>
  </li>
</ul>

Wir verwenden flexbox, um eine einzige Reihe von Elementen zu erstellen; das <ul> ist der Flex-Container, und die <li>-Kindlistenelemente werden horizontal angezeigt, wobei jedes Element die volle Breite des Karussells einnimmt.

Die ungeordnete Liste wird so eingestellt, dass sie die volle Breite des Ansichtsfensters ausfüllt, mit einer width von 100vw; sie erhält auch eine height von 300px und etwas padding. Dann verwenden wir Flexbox, um die Liste zu gestalten — indem wir einen display-Wert von flex einstellen, sodass die Kindlistenelemente in einer Reihe angezeigt werden (aufgrund des Standardwerts flex-direction von row), mit einem gap von 4vw zwischen jedem Element.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  text-align: center;
  font-size: 1.7rem;
}

ul {
  width: 100vw;
  height: 300px;
  padding: 20px;
  display: flex;
  gap: 4vw;
}

Nun ist es an der Zeit, die Listenelemente zu gestalten. Die ersten Deklarationen bieten grundlegende Formatierungen. Die wichtige Deklaration ist der flex-Wert von 0 0 100%, der jedes Element zwingt, so breit wie der Container zu sein (das <ul>). Infolgedessen wird der Inhalt seinen Container überfluten, und das Ansichtsfenster wird horizontal scrollen.

li {
  list-style-type: none;
  background-color: #eee;
  border: 1px solid #ddd;
  padding: 20px;

  flex: 0 0 100%;
}

li:nth-child(even) {
  background-color: cyan;
}

Zusätzlich wird jedem geradzahligen Listenelement über :nth-child() eine andere Hintergrundfarbe zugewiesen, sodass der Scroll-Effekt leichter zu erkennen ist.

In diesem Abschnitt werden wir einen Überlauf-Wert auf das <ul> setzen, um es in einen Scroll-Container zu verwandeln, und dann CSS-Scroll-Snapping anwenden, um die Liste so einrasten zu lassen, dass sie zur Mitte jedes Listenelements schnellt, wenn der Inhalt gescrollt wird.

Ein overflow-x-Wert von scroll wird auf das <ul> gesetzt, sodass sein Inhalt horizontal innerhalb der Liste scrollt, anstatt das gesamte Ansichtsfenster zu scrollen. CSS-Scroll-Snap wird dann verwendet, um zu jeder "Seite" zu schnappen — ein scroll-snap-type-Wert von x mandatory wird eingestellt, um die Liste in einen Scroll-Snap-Container zu verwandeln. Das Schlüsselwort x bewirkt, dass die Snap-Ziele des Containers horizontal eingerastet werden, während das Schlüsselwort mandatory bedeutet, dass der Container immer zu einem Snap-Ziel am Ende einer Scroll-Action einrastet.

ul {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

Als nächstes wird ein scroll-snap-align-Wert von center auf die Listenelemente gesetzt, damit die Liste, wenn sie gescrollt wird, zur Mitte jedes Listenelements einrastet.

li {
  scroll-snap-align: center;
}

Der bisher gezeigte Code wird wie folgt gerendert:

Versuchen Sie, die Liste durch Wischen oder Verwenden der Bildlaufleiste zu scrollen, um den Scroll-Snap-Effekt zu sehen. Egal, wo Sie Ihre Scroll-Bewegung beenden, ein Element wird immer an seinen Platz "einrasten".

In diesem Abschnitt fügen wir dem Demo "vorherige" und "nächste" Scroll-Schaltflächen hinzu, um ein Werkzeug zum Navigieren zwischen den Karussell-Seiten bereitzustellen. Dies wird mit Hilfe des ::scroll-button() Pseudo-Elements erreicht.

Die ::scroll-button() Pseudo-Elemente generieren nur Schaltflächen innerhalb eines Scroll-Containers, wenn ihre content-Eigenschaften auf einen anderen Wert als none gesetzt sind. Jedes ::scroll-button() repräsentiert eine Scroll-Schaltfläche, deren Scroll-Richtung durch das Argument des Selektors angegeben wird. Sie können bis zu vier Scroll-Schaltflächen pro Scroll-Container generieren, wobei jede den Inhalt des Containers in Richtung des Anfangs oder Endes der Block- oder Inline-Achse scrollt.

Sie können auch ein Argument von * angeben, um alle ::scroll-button() Pseudo-Elemente mit Stilen anzupassen.

Zuerst werden alle Scroll-Schaltflächen mit einigen grundlegenden Stilen sowie Stilen für verschiedene Zustände angepasst. Es ist wichtig, :focus-Stile für Tastaturbenutzer zu setzen. Da Scroll-Schaltflächen automatisch auf disabled eingestellt werden, wenn kein weiteres Scrollen in dieser Richtung mehr möglich ist, verwenden wir die :disabled Pseudo-Klasse, um diesen Zustand anzupassen.

ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: rgb(0 0 0 / 0.7);
  cursor: pointer;
}

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  color: rgb(0 0 0 / 1);
}

ul::scroll-button(*):active {
  translate: 1px 1px;
}

ul::scroll-button(*):disabled {
  color: rgb(0 0 0 / 0.2);
  cursor: unset;
}

Als nächstes wird über die content-Eigenschaft ein geeignetes Icon auf den linken und rechten Scroll-Schaltflächen gesetzt, was auch die Generierung der Scroll-Schaltflächen verursacht:

ul::scroll-button(left) {
  content: "◄";
}

ul::scroll-button(right) {
  content: "►";
}

Wir haben die Scroll-Schaltflächen erstellt. Nun werden wir sie relativ zum Karussell mithilfe der CSS-Ankerpositionierung positionieren.

Zuerst wird ein Referenz-anchor-name auf die Liste gesetzt. Als nächstes wird jede Scroll-Schaltfläche so eingestellt, dass ihre position auf absolute gesetzt ist und ihre position-anchor-Eigenschaft auf den gleichen Referenznamen wie die Liste gesetzt ist, um die beiden miteinander zu verbinden.

ul {
  anchor-name: --myCarousel;
}

ul::scroll-button(*) {
  position: absolute;
  position-anchor: --myCarousel;
}

Um jede Scroll-Schaltfläche tatsächlich zu positionieren, setzen wir Werte auf ihre inset properties. Wir verwenden anchor()-Funktionen, um die angegebenen Seiten der Schaltflächen relativ zu den Seiten des Karussells zu positionieren. In jedem Fall wird die calc()-Funktion verwendet, um etwas Platz zwischen dem Rand der Schaltfläche und dem Rand des Karussells hinzuzufügen. Zum Beispiel wird die rechte Kante der linken Scroll-Schaltfläche 70 Pixel rechts von der linken Kante des Karussells positioniert.

ul::scroll-button(left) {
  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(top) + 13px);
}

ul::scroll-button(right) {
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(top) + 13px);
}

Durch das Hinzufügen des Scroll-Schaltflächen-Codes erhalten wir das folgende Ergebnis:

Versuchen Sie, die "vorherige" und "nächste" Scroll-Schaltflächen zu drücken, um zu sehen, wie die Seiten gescrollt werden, unter Einhaltung des Scroll-Snapping-Verhaltens. Beachten Sie auch, wie die "vorherige"-Schaltfläche automatisch deaktiviert wird, wenn die Liste an den Anfang des Inhalts gescrollt wird, während die "nächste"-Schaltfläche automatisch deaktiviert wird, wenn die Liste an das Ende des Inhalts gescrollt wird.

Scroll-Markierungen sind eine Gruppe von Schaltflächen, von denen jede das Karussell zu einer Position scrollt, die einem der Inhaltsseiten entspricht. Sie bieten ein zusätzliches Navigationstool, das auch Ihren Fortschritt durch die Karussell-Seiten anzeigt.

In diesem Abschnitt werden wir dem Karussell Scroll-Markierungen hinzufügen, die drei Hauptmerkmale umfassen:

• Die scroll-marker-group-Eigenschaft wird auf das Scroll-Container-Element gesetzt. Sie muss auf einen anderen Wert als none gesetzt sein, damit das ::scroll-marker-group-Pseudo-Element generiert wird; ihr Wert gibt an, wo die Scroll-Markierungsgruppe in der Tab-Reihenfolge und Box-Reihenfolge des Karussells (aber nicht in der DOM-Struktur) erscheint — before setzt sie an den Anfang, vor den Scroll-Schaltflächen, während after sie an das Ende setzt.
• Das ::scroll-marker-group-Pseudo-Element existiert innerhalb eines Scroll-Containers und wird verwendet, um Scroll-Markierungen zusammenzufassen und anzuordnen.
• ::scroll-marker-Pseudo-Elemente existieren innerhalb der Kinder und ::column-Fragmente eines Scroll-Container-Vorfahren und repräsentieren ihre Scroll-Markierungen. Diese werden innerhalb des Vorfahren's ::scroll-marker-group zur Layout-Zwecken gesammelt.

Zuerst wird die scroll-marker-group-Eigenschaft der Liste auf after gesetzt, sodass das ::scroll-marker-group-Pseudo-Element nach dem DOM-Inhalt der Liste in der Fokus- und Box-Reihenfolge platziert wird; dies bedeutet, dass es nach den Scroll-Schaltflächen kommt:

ul {
  scroll-marker-group: after;
}

Als nächstes wird das ::scroll-marker-group-Pseudo-Element der Liste relativ zum Karussell mithilfe der CSS-Ankerpositionierung positioniert, ähnlich wie die Scroll-Schaltflächen, mit der Ausnahme, dass es horizontal zentriert auf dem Karussell mit einem justify-self-Wert von anchor-center wird. Die Gruppe wird mit Flexbox layoutet, mit einem justify-content-Wert von center und einem gap von 20px, sodass ihre Kinder (die ::scroll-marker) innerhalb der ::scroll-marker-group zentriert mit einem Abstand zwischen jedem von ihnen sind.

ul::scroll-marker-group {
  position: absolute;
  position-anchor: --myCarousel;
  top: calc(anchor(bottom) - 70px);
  justify-self: anchor-center;

  display: flex;
  justify-content: center;
  gap: 20px;
}

Als nächstes kümmern wir uns um das Aussehen und Gefühl der Scroll-Markierungen selbst; sie können wie jedes andere generierte Element gestylt werden. Es ist wichtig zu beachten, dass wir einen anderen Wert als none für die content-Eigenschaft einstellen müssen, damit die Scroll-Markierungen tatsächlich generiert werden. Wir setzen auch einige grundlegende Stile, um die Markierungen als umrissene Kreise erscheinen zu lassen:

li::scroll-marker {
  content: "";
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 50%;
}

Schließlich wird für diesen Abschnitt die :target-current-Pseudo-Klasse verwendet, um die Scroll-Markierung auszuwählen, die der aktuell sichtbaren "Seite" entspricht, und hervorzuheben, wie weit der Benutzer durch den Inhalt gescrollt hat. In diesem Fall setzen wir den background-color auf black, damit sie als ausgefüllter Kreis gestylt wird.

li::scroll-marker:target-current {
  background-color: black;
}

All die obigen Codes fügen sich zusammen, um das folgende Ergebnis zu erzeugen:

Seit dem vorherigen Live-Beispiel wurden die Scroll-Markierungen hinzugefügt — versuchen Sie, sie zu drücken, um direkt zu jeder Seite zu springen. Beachten Sie, wie die aktuelle Markierung hervorgehoben ist, damit Sie sehen können, wo Sie sich in der Paginierung befinden. Versuchen Sie auch, zur Scroll-Markierungsgruppe zu tabben, und verwenden Sie dann die Cursortasten, um durch jede Seite zu wechseln.

Sie können auch zwischen den Seiten navigieren, indem Sie nach links und rechts wischen, die Bildlaufleiste ziehen oder die Scroll-Schaltflächen drücken.

Das zweite Demo ist ein Karussell mit mehreren Elementen pro Seite, das erneut Scroll-Schaltflächen und Scroll-Markierungen zum Navigieren durch die Seiten enthält. Dieses Demo ist auch responsiv — je nach Breite des Ansichtsfensters erscheinen unterschiedliche Mengen an Elementen auf jeder Seite.

Dieses Demo ist dem Karussell mit Einzelseiten sehr ähnlich, außer dass anstelle von Flexbox für das Layout CSS-Multi-Column-Layout und das ::column-Pseudo-Element verwendet werden, um beliebige Spalten zu erstellen, die sich über die gesamte Breite des Karussells erstrecken und mehrere Elemente enthalten können.

Mit diesem Ansatz können wir sicher sein, dass, wenn das Ansichtsfenster wächst oder schrumpft, während die Elementgröße konstant bleibt, niemals ein Teil eines Elements außerhalb des Scrollports angezeigt wird. In diesem Fall werden die Scroll-Markierungen an Scroll-Container-Fragmenten, pro Spalte, anstelle von an Kindern, pro Element, erstellt.

Das HTML ist dem des vorherigen Demos sehr ähnlich, mit der Ausnahme, dass es erheblich mehr Listenelemente gibt und, da mehrere Elemente gleichzeitig sichtbar sein werden, wir sie als Elemente statt als Seiten kennzeichnen:

...
  <li>
    <h2>Item 1</h2>
  </li>
...

Dieses Demo hat auch sehr ähnliche CSS, mit Ausnahme der Regeln, die in den folgenden Abschnitten erklärt werden.

<h1>CSS carousel multiple items per page</h1>
<ul>
  <li>
    <h2>Item 1</h2>
  </li>
  <li>
    <h2>Item 2</h2>
  </li>
  <li>
    <h2>Item 3</h2>
  </li>
  <li>
    <h2>Item 4</h2>
  </li>
  <li>
    <h2>Item 5</h2>
  </li>
  <li>
    <h2>Item 6</h2>
  </li>
  <li>
    <h2>Item 7</h2>
  </li>
  <li>
    <h2>Item 8</h2>
  </li>
  <li>
    <h2>Item 9</h2>
  </li>
  <li>
    <h2>Item 10</h2>
  </li>
  <li>
    <h2>Item 11</h2>
  </li>
  <li>
    <h2>Item 12</h2>
  </li>
  <li>
    <h2>Item 13</h2>
  </li>
  <li>
    <h2>Item 14</h2>
  </li>
  <li>
    <h2>Item 15</h2>
  </li>
</ul>

Dieses Beispiel verwendet CSS-Multi-Column-Layout, anstelle von Flexbox, um die Karussellelemente zu layouten. Der columns-Wert von 1 zwingt jede Spalte, die volle Breite des Containers einzunehmen, wobei die Inhalte jeweils eine Spalte gleichzeitig anzeigen. Ein text-align-Wert von center wird auch angewendet, um die Inhalte mit dem Mittelpunkt der Liste abzustimmen.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  text-align: center;
  font-size: 1.7rem;
}

ul {
  width: 100vw;
  height: 300px;
  padding: 10px;

  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  columns: 1;
  text-align: center;
}

Wir stellen grundlegendes Box-Styling für die Listenelemente zur Verfügung und dann Layout-Stile, um ein oder mehrere Elemente in die einzelne Inhalts-Spalte passen zu lassen, abhängig von der Breite des Ansichtsfensters. Die Anzahl ändert sich dynamisch, wenn die Liste breiter oder schmaler wird.

li {
  list-style-type: none;

  display: inline-block;
  height: 100%;
  width: 200px;

  background-color: #eee;
  border: 1px solid #ddd;
  padding: 20px;
  margin: 0 10px;

  text-align: left;
}

li:nth-child(even) {
  background-color: cyan;
}

Die wichtigsten Layout-Eigenschaften sind wie folgt:

• Ein display-Wert von inline-block wurde eingestellt, um die Listenelemente nebeneinander zu platzieren und die Liste horizontal scrollen zu lassen.
• Eine absolute width von 200px wurde auf ihnen eingestellt, um ihre Größe zu kontrollieren, was bedeutet, dass ein oder mehrere in eine Spalte passen, die sich zusammen mit der Breite des Ansichtsfensters ausdehnt und zusammenzieht.
• Ein text-align-Wert von left wird auf sie gesetzt, um das text-align: center, das auf den übergeordneten Container angewendet wurde, zu überschreiben, damit der Inhalt der Elemente linksbündig ist.

Die scroll-snap-align-Eigenschaft wird jetzt auf die ::column-Pseudo-Elemente gesetzt — die die Inhalts-Spalten repräsentieren, die von der columns-Eigenschaft generiert werden — anstelle auf die Listenelemente. Wir möchten zu jeder vollständigen Spalte und nicht zu jedem einzelnen Listenelement einrasten, wobei mit jeder Scroll-Action alle neuen Elemente gezeigt werden.

ul::column {
  scroll-snap-align: center;
}

ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: rgb(0 0 0 / 0.7);
  cursor: pointer;
}

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  color: rgb(0 0 0 / 1);
}

ul::scroll-button(*):active {
  translate: 1px 1px;
}

ul::scroll-button(*):disabled {
  color: rgb(0 0 0 / 0.2);
  cursor: unset;
}

ul::scroll-button(left) {
  content: "◄";
}

ul::scroll-button(right) {
  content: "►";
}

ul {
  anchor-name: --myCarousel;
}

ul::scroll-button(*) {
  position: absolute;
  position-anchor: --myCarousel;
}

ul::scroll-button(left) {
  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(top) + 13px);
}

ul::scroll-button(right) {
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(top) + 13px);
}

ul {
  scroll-marker-group: after;
}

ul::scroll-marker-group {
  position: absolute;
  position-anchor: --myCarousel;
  top: calc(anchor(bottom) - 70px);
  justify-self: anchor-center;
  display: flex;
  justify-content: center;
  gap: 20px;
}

Das CSS zum Erstellen der Scroll-Markierungen in diesem Demo ist nahezu identisch mit dem vorherigen Demo, mit der Ausnahme, dass die Selektoren unterschiedlich sind — die Scroll-Markierungen werden auf den generierten ::column Scroll-Markierungen und nicht auf den Listenelementen erstellt (beachten Sie, wie wir hier zwei Pseudo-Elemente einschließen, um Scroll-Markierungen auf den generierten Spalten zu erzeugen).

ul::column::scroll-marker {
  content: "";
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 10px;
}

ul::column::scroll-marker:target-current {
  background-color: black;
}

Das responsive Karussell wird wie folgt gerendert:

Versuchen Sie, zwischen den verschiedenen Seiten zu navigieren, indem Sie nach links und rechts wischen, die Bildlaufleiste verwenden, die Scroll-Schaltflächen drücken und die Scroll-Markierungen drücken. Die Funktionalität ist ähnlich wie im Einzelseiten-Flexbox-Beispiel, außer dass jetzt mehrere Listenelemente in jeder navigierten Position sind; die Scroll-Markierungen sind auf Spaltenfragmenten gesetzt, die möglicherweise mehrere Elemente enthalten, anstelle auf jedem Element.

Versuchen Sie auch, die Bildschirmbreite zu ändern, und Sie werden sehen, dass sich die Anzahl der Listenelemente, die in der Liste Platz finden, ändert — und daher auch die Anzahl der generierten Spalten. Mit der Änderung der Spaltenanzahl aktualisiert sich die Anzahl der Scroll-Markierungen dynamisch, sodass jede Spalte in der Scroll-Markierungsgruppe vertreten ist.

• CSS-Overflow-Modul
• CSS-Ankerpositionierung-Modul
• CSS-Scroll-Snap-Modul
• CSS Carousel Gallery über chrome.dev (2025)