Erstellen von CSS-Karussells

Karussells sind ein häufiges Feature im Web. Sie nehmen typischerweise die Form eines scrollbaren Inhaltsbereichs an, der mehrere Elemente wie Präsentationsfolien, Anzeigen, Schlagzeilen oder wichtige Produktmerkmale enthält.

Benutzer können durch Klicken oder Aktivieren von Navigationstasten oder durch Wischen durch die Elemente navigieren. 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-Symbolen, von denen jedes ein oder mehrere Elemente darstellt, abhängig davon, wie viele Elemente an jeder Scroll-Position im Karussell angezeigt werden.

Ein Hauptmerkmal von Karussells ist die Paginierung — die Elemente fühlen sich wie separate Inhaltsstücke an, zwischen denen gewechselt wird, anstatt einen kontinuierlichen Inhaltsbereich zu bilden. Sie könnten ein Element auf einmal anzeigen oder mehrere Elemente auf jeder Karussell-"Seite". Wenn mehrere Elemente sichtbar sind, könnten Sie bei jedem Drücken der "nächsten" oder "vorherigen" Schaltfläche eine ganz neue Gruppe von Elementen anzeigen. Alternativ könnten Sie ein einziges neues Element an ein Ende der Liste hinzufügen, während das Element am anderen Ende aus dem Blickfeld verschoben wird.

Karussells mit JavaScript zu erstellen kann ziemlich anfällig und herausfordernd in der Implementierung sein. Sie erfordern Skripte, um Scroll-Markierungen den Elementen zuzuordnen, die sie repräsentieren, während die Scroll-Schaltflächen kontinuierlich aktualisiert werden müssen, um korrekt zu funktionieren. Wenn Karussells mit JavaScript erstellt werden, muss die Zugänglichkeit des Karussells und der zugehörigen Bedienelemente hinzugefügt werden.

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

Die CSS-Karussell-Funktionen bieten Pseudoelemente und Pseudoklassen, die die Erstellung von Karussells nur mit CSS und HTML ermöglichen, wobei der Browser den Großteil der Scroll- und Linkverweise auf zugängliche, flexible und konsistente Weise übernimmt. Diese Funktionen sind wie folgt:

::scroll-button()

Innerhalb eines Scroll-Containers generiert; diese Pseudoelemente repräsentieren Scroll-Schaltflächen, die den Container in eine angegebene Richtung scrollen.

::scroll-marker-group

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

::scroll-marker

Generiert innerhalb der Kinder eines Scroll-Container-Vorfahren oder innerhalb der Spalten eines Scroll-Containers, um deren Scroll-Markierungen darzustellen. Diese können ausgewählt werden, um den Container zu ihren zugehörigen Kind-Elementen oder Spalten zu scrollen, und werden innerhalb der Scroll-Container-::scroll-marker-group-Anordnung gesammelt.

:target-current

Diese Pseudoklasse kann verwendet werden, um die derzeit aktive Scroll-Markierung auszuwählen. Sie kann verwendet werden, um einen hervorgehobenen Stil für die derzeit aktive Markierung bereitzustellen, was wichtig für Benutzerfreundlichkeit und Zugänglichkeit ist.

::column

Dieses Pseudoelement repräsentiert die einzelnen Spalten, die generiert werden, wenn ein Container so eingestellt ist, dass sein Inhalt in mehreren Spalten über das CSS mehrspaltige Layout angezeigt wird. Es kann in Verbindung mit ::scroll-marker verwendet werden, um eine Scroll-Markierung für jede Spalte zu generieren.

Unser erstes Demo ist ein Karussell mit einseitigen Seiten, 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 werden Flexbox verwenden, um das Karussell zu gestalten, Scroll-Snapping, um eine klare Paginierung sicherzustellen, und die Positionsverankerung, um die Positionsrollen 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>-Kinder-Listenelemente werden horizontal angezeigt, wobei jedes Element die volle Breite des Karussells einnimmt.

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

* {
  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 stylen. Die ersten Deklarationen bieten rudimentäres Styling. Die wichtigste Deklaration ist der flex Wert von 0 0 100%, der jedes Element zwingt, so breit wie der Container zu sein (das <ul>). Dadurch wird der Inhalt seinen Container überlaufen, 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 erhält jedes gerade Listenelement eine andere Hintergrundfarbe durch :nth-child(), damit der Scrolling-Effekt leichter zu sehen ist.

In diesem Abschnitt werden wir einen Überlaufwert auf das <ul> setzen, um es in einen Scroll-Container zu verwandeln, und dann CSS-Scroll-Snapping anwenden, um die Liste beim Scrollen in der Mitte jedes Listenelements einzurasten.

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

In diesem Abschnitt fügen wir der Demo "vorherige" und "nächste" Scroll-Schaltflächen hinzu, um ein Werkzeug zur Navigation zwischen Karussellseiten bereitzustellen. Dies wird mit dem ::scroll-button() Pseudoelement erreicht.

Die ::scroll-button() Pseudoelemente erzeugen Schaltflächen innerhalb eines Scroll-Containers nur, wenn ihre content Eigenschaften auf einen anderen Wert als none gesetzt sind. Jede ::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, die jeweils den Inhalt des Containers in Richtung Anfang oder Ende der Block- oder Inline-Achse scrollen.

Sie können auch ein Argument von * angeben, um alle ::scroll-button() Pseudoelemente mit Stilen zu versehen.

Zuerst werden alle Scroll-Schaltflächen mit einigen rudimentären Stilen sowie Stilen basierend auf verschiedenen Zuständen versehen. Es ist wichtig, :focus Stile für Tastaturnutzer festzulegen. Außerdem werden die Scroll-Schaltflächen automatisch auf disabled gesetzt, wenn in dieser Richtung kein Scrollen mehr erfolgen kann. Wir verwenden die :disabled Pseudoklasse, um diesen Zustand zu adressieren.

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 durch die content-Eigenschaft ein entsprechendes Symbol auf den linken und rechten Scroll-Schaltflächen gesetzt, was auch dazu führt, dass die Scroll-Schaltflächen generiert werden:

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

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

Wir haben die Scroll-Schaltflächen erstellt. Nun werden wir sie relativ zum Karussell positionieren, unter Verwendung des CSS-Ankerpositionierung.

Zuerst wird ein referenzierter anchor-name auf der Liste festgelegt. Danach hat jede Scroll-Schaltfläche ihre position auf absolute gesetzt, und ihre position-anchor Eigenschaft wird auf denselben Referenznamen festgelegt, der in der Liste definiert wurde, um die beiden zu verknüpfen.

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 ihren Einsetzeigenschaften. 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 Abstand zwischen dem Rand der Schaltfläche und dem Rand des Karussells hinzuzufügen. Zum Beispiel ist der rechte Rand der linken Scroll-Schaltfläche 70 Pixel rechts vom linken Rand 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 Hinzufügen des Scroll-Schaltflächencodes erhalten wir folgendes Ergebnis:

Versuchen Sie, die "vorherigen" und "nächsten" Scroll-Schaltflächen zu drücken, um zu sehen, wie die Seiten gescrollt werden, wobei das Scroll-Snap-Verhalten respektiert wird. Beachten Sie auch, dass die "vorherige" Schaltfläche automatisch deaktiviert wird, wenn die Liste bis zum Anfang des Inhalts gescrollt wird, während die "nächste" Schaltfläche automatisch deaktiviert wird, wenn die Liste bis zum Ende des Inhalts gescrollt wird.

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

In diesem Abschnitt werden wir Scroll-Markierungen zum Karussell hinzufügen, was drei Hauptfunktionen umfasst:

• Die scroll-marker-group Eigenschaft wird auf dem Scroll-Container-Element gesetzt. Sie muss auf einen Wert, der nicht none ist, eingestellt werden, damit das ::scroll-marker-group Pseudoelement generiert wird; ihr Wert legt fest, wo die Gruppe der Scroll-Markierungen im Fokus- und Layoutbox-Reihenfolge (aber nicht in der DOM-Struktur) des Karussells erscheint — before plaziert sie am Anfang, vor den Scroll-Schaltflächen, während after sie am Ende platziert.
• Das ::scroll-marker-group Pseudoelement existiert innerhalb eines Scroll-Containers und wird verwendet, um Scroll-Markierungen zu sammeln und zu gestalten.
• ::scroll-marker Pseudoelemente existieren innerhalb der Kinder und ::column Fragmente eines Scroll-Container-Vorfahren und repräsentieren deren Scroll-Markierungen. Diese werden innerhalb des Vorfahren ::scroll-marker-group zur Layoutzwecken gesammelt.

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

ul {
  scroll-marker-group: after;
}

Als nächstes wird das ::scroll-marker-group Pseudoelement der Liste relativ zum Karussell positioniert, indem CSS-Ankerpositionierung verwendet wird, ähnlich wie bei den Scroll-Schaltflächen, außer dass es horizontal auf dem Karussell zentriert wird, indem ein justify-self Wert von anchor-center verwendet wird. Die Gruppe wird mit Flexbox layoutiert, wobei ein justify-content Wert von center und ein gap von 20px verwendet werden, sodass ihre Kinder (die ::scroll-marker Pseudoelemente) innerhalb der ::scroll-marker-group zentriert sind, mit einem Abstand zwischen jedem.

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 gehen wir auf das Erscheinungsbild und die Haptik der Scroll-Markierungen ein; sie können wie jedes andere generierte Inhaltsstück gestylt werden. Es ist wichtig zu beachten, dass wir einen Wert, der nicht none ist, für die content Eigenschaft festlegen müssen, damit die Scroll-Markierungen tatsächlich generiert werden. Wir setzen auch einige rudimentäre Stile, um die Markierungen als umrissene Kreise anzuzeigen:

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

Schließlich für diesen Abschnitt wird die :target-current Pseudoklasse 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 die background-color auf black, sodass sie als ausgefüllter Kreis gestylt ist.

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

Der gesamte obenstehende Code fügt 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 der aktuelle Marker hervorgehoben wird, sodass Sie sehen können, wo Sie sich in der Paginierung befinden. Versuchen Sie auch, zur Scroll-Marker-Gruppe zu tabben, und verwenden Sie dann die Pfeiltasten, um durch jede Seite zu navigieren.

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

Das zweite Demo zeigt ein Karussell mit mehreren Elementen pro Seite, das ebenfalls Scroll-Schaltflächen und Scroll-Markierungen zur Navigation durch die Seiten beinhaltet. Dieses Demo ist auch responsive — je nach Breite des Ansichtsfensters erscheinen unterschiedliche Anzahlen von Elementen auf jeder Seite.

Dieses Demo ist dem Karussell mit einseitigen Seiten Demo sehr ähnlich, abgesehen davon, dass es statt Flexbox für das Layout CSS mehrspaltiges Layout und das ::column Pseudoelement verwendet, um beliebige Spalten zu erstellen, die die volle Breite des Karussells überspannen und mehrere Elemente enthalten können.

Mit diesem Ansatz können wir sicherstellen, dass, wenn das Ansichtsfenster größer oder kleiner wird, während die Elementgröße konstant bleibt, niemals ein teilweises Element am Rand des Scroll-Ports angezeigt wird. In diesem Fall werden die Scroll-Markierungen auf Scroll-Container-Fragmente, pro Spalte, anstatt auf Kinder, pro Element, erstellt.

Das HTML ist dem des vorherigen Demos sehr ähnlich, abgesehen davon, dass es deutlich mehr Listenelemente gibt und, da mehrere Elemente auf einmal sichtbar sein werden, wir sie als Elemente anstatt Seiten kennzeichnen:

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

Dieses Demo hat auch sehr ähnliches CSS, mit Ausnahme der in den folgenden Abschnitten erläuterten Regeln.

<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 mehrspaltiges Layout anstelle von Flexbox, um die Karussell-Elemente anzuordnen. Der columns Wert von 1 zwingt jede Spalte, die volle Breite des Containers einzunehmen, wobei die Inhalte eine einzelne Spalte auf einmal anzeigen. Ein text-align Wert von center wird ebenfalls angewendet, um die Inhalte mit der Mitte der Liste auszurichten.

* {
  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 bieten rudimentäres Box-Styling für die Listenelemente und wenden dann Layout-Stile an, um ein oder mehrere Elemente in der einzelnen Inhaltsspalte zu platzieren, je nach 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 Schlüssel-Layout-Eigenschaften sind wie folgt:

• Ein display Wert von inline-block wurde gesetzt, um die Listenelemente nebeneinander zu zwingen und die Liste horizontal zu scrollen.
• Eine absolute width von 200px wurde auf ihnen gesetzt, um ihre Größe zu kontrollieren, was bedeutet, dass eines oder mehrere in eine Spalte passen, die mit der Breite des Ansichtsfensters wächst und schrumpft.
• Ein text-align Wert von left wird auf ihnen gesetzt, um das text-align: center aufzuheben, das auf den übergeordneten Container gesetzt ist, sodass der Inhalt des Elements links ausgerichtet ist.

Die scroll-snap-align Eigenschaft ist jetzt auf den ::column Pseudoelementen gesetzt — die die Inhaltsspalten repräsentieren, die durch die columns Eigenschaft generiert werden — anstelle der Listenelemente. Wir wollen zu jedem vollständigen Spaltenblock snappen, anstatt zu jedem einzelnen Listenelement, und bei jeder Scroll-Aktion alle neuen Elemente anzeigen.

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 zur Erstellung der Scroll-Markierungen in diesem Demo ist fast identisch mit dem vorhergehenden Demo, außer dass die Selektoren anders sind — die Scroll-Markierungen werden auf den generierten ::column Scroll-Markierungen erstellt, anstatt auf den Listenelementen (beachten Sie, dass wir hier zwei Pseudoelemente einbinden, um Scroll-Markierungen auf den generierten Spalten zu generieren).

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 dargestellt:

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 der des einseitigen Flexbox-Beispiels, außer dass jetzt mehrere Listenelemente in jeder navigierten Position sind; die Scroll-Markierungen befinden sich auf Spaltenfragmenten, die möglicherweise mehrere Elemente enthalten, anstatt auf jedem Element.

Versuchen Sie auch, die Bildschirmbreite zu ändern, und Sie sehen, dass die Anzahl der Listenelemente, die in die Liste passen, sich ändert — und somit ändert sich auch die Anzahl der generierten Spalten. Wenn sich die Anzahl der Spalten ändert, wird die Anzahl der Scroll-Markierungen dynamisch aktualisiert, sodass jede Spalte in der Scroll-Markierungsgruppe vertreten ist.

• CSS Overflow Modul
• CSS Ankerpositionierung Modul
• CSS Scroll Snap Modul
• CSS Carousel Gallery via chrome.dev (2025)