Erstellen von CSS-Karussells

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

Benutzer können durch die Elemente navigieren, indem sie auf Navigationsschaltflächen klicken oder diese aktivieren oder durch Wischen. Die Navigation umfasst normalerweise:

Scroll-Schaltflächen

Allgemein "Vorherige" und "Nächste" Schaltflächen oder Links.

Scroll-Marker

Eine Serie von Schaltflächen- oder Link-Icons, die jeweils ein oder mehrere Elemente darstellen, abhängig davon, wie viele Elemente an jeder Scrollposition innerhalb des Karussells angezeigt werden.

Ein Hauptmerkmal von Karussells ist die Paginierung — die Elemente fühlen sich wie separate Inhalte an, zwischen denen man bewegt wird, anstatt einen durchgehenden Inhaltsabschnitt zu bilden. Sie könnten ein Element auf einmal oder mehrere Elemente auf jeder Karussell-"Seite" anzeigen. Wenn mehrere Elemente sichtbar sind, könnten Sie bei jedem Drücken der "Nächste" oder "Vorherige"-Schaltfläche eine komplett neue Gruppe von Elementen anzeigen. Alternativ könnten Sie ein neues Element an ein Ende der Liste hinzufügen, während das Element am anderen Ende aus dem Blickfeld bewegt wird.

Das Erstellen von Karussells mit JavaScript kann ziemlich brüchig und schwierig zu implementieren sein. Sie benötigen Skripte, um Scroll-Marker mit den von ihnen vertretenen Elementen zu verknüpfen und die Scroll-Schaltflächen kontinuierlich zu aktualisieren, damit sie korrekt 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 die Verwendung von JavaScript erstellen, indem wir CSS-Karussellfunktionen verwenden.

Die CSS-Karussell-Funktionen bieten Pseudoelemente und Pseudoklassen, die die Erstellung von Karussells mithilfe von nur CSS und HTML ermöglichen, wobei der Browser die meiste Scroll- und Linkreferenzierung auf eine zugängliche, flexible und konsistente Weise behandelt. Diese Funktionen sind wie folgt:

::scroll-button()

Innerhalb eines scroll container generiert, repräsentieren diese Pseudoelemente Scroll-Schaltflächen, die den Container in eine bestimmte Richtung scrollen.

::scroll-marker-group

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

::scroll-marker

Innerhalb der Kinder eines Scroll-Container-Vorfahren oder innerhalb der Spalten eines Scroll-Containers generiert, um ihre Scroll-Marker zu repräsentieren. Diese können ausgewählt werden, um den Container zu ihren zugehörigen Kind-Elementen oder Spalten zu scrollen, und werden innerhalb der ::scroll-marker-group des Scroll-Containers für Layout-Zwecke gesammelt.

:target-current

Diese Pseudoklasse kann verwendet werden, um den derzeit aktiven Scroll-Marker auszuwählen. Sie kann verwendet werden, um einen Hervorhebungsstil für den derzeit aktiven Marker bereitzustellen, was für die Benutzerfreundlichkeit und Zugänglichkeit wichtig ist.

::column

Dieses Pseudoelement repräsentiert die einzelnen Spalten, die generiert werden, wenn ein Container so eingestellt ist, dass seine Inhalte in mehreren Spalten angezeigt werden, mithilfe des CSS multi-column layout. Es kann in Verbindung mit ::scroll-marker verwendet werden, um einen Scroll-Marker für jede Spalte zu generieren.

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

Wir verwenden flexbox zur Anordnung des Karussells, Scroll-Snapping zur Durchsetzung klarer Paginierung und Ankerpositionierung, um die Position der Scroll-Schaltflächen und die Scroll-Marker relativ zum Karussell zu bestimmen.

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 einzelne Reihe von Elementen zu erstellen; das <ul> ist der Flex-Container, und die <li>-Kind-Listenelemente werden horizontal angezeigt, wobei jedes Element die volle Breite des Karussells einnimmt.

Die ungeordnete Liste wird so angepasst, dass sie die volle Breite des Viewports mit einer width von 100vw einnimmt; 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 setzen, damit die Kind-Listenelemente in einer Reihe angezeigt werden (aufgrund des Standardwerts von flex-direction row), mit einem gap von 4vw zwischen jedem einzelnen.

* {
  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;
}

Jetzt ist es an der Zeit, die Listenelemente zu gestalten. Die ersten Deklarationen bieten rudimentäre Stile. Die wichtige Deklaration ist der flex-Wert von 0 0 100%, der jedes Element zwingt, so breit wie der Container (das <ul>) zu sein. Dadurch wird der Inhalt seinen Container überlaufen und der Viewport 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;
}

Darüber hinaus wird jedem geradzahligen Listenelement eine andere Hintergrundfarbe mittels :nth-child() zugewiesen, sodass der Scrolling-Effekt leichter zu erkennen ist.

In diesem Abschnitt setzen wir einen Überlaufwert auf das <ul>, um ihn in einen scroll container zu verwandeln, und wenden dann CSS scroll snapping an, um die Liste beim Scrollen des Inhalts zur Mitte jedes Listenelements zu schnappen.

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

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 beim Scrollen der Liste zur Mitte jedes Listenelements geschnappt wird.

li {
  scroll-snap-align: center;
}

Der bisher gezeigte Code wird wie folgt angezeigt:

Versuchen Sie, die Liste zu scrollen, indem Sie wischen oder die Scroll-Leiste verwenden, um den Scroll-Snap-Effekt zu sehen. Unabhängig davon, wo Sie Ihr Scrollen beenden, wird immer ein Element in Position "schnappen".

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

Die ::scroll-button()-Pseudoelemente erzeugen Schaltflächen innerhalb eines Scroll-Containers, sobald ihre content-Eigenschaften auf einen anderen Wert als none gesetzt sind. Jedes ::scroll-button() repräsentiert eine Scroll-Schaltfläche, deren Scrollrichtung 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 Start 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. Da Scroll-Schaltflächen automatisch auf disabled gesetzt werden, wenn in dieser Richtung kein weiteres Scrollen möglich ist, verwenden wir die :disabled-Pseudoklasse, um diesen Zustand anzusprechen.

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 ein geeignetes Icon auf den linken und rechten Scroll-Schaltflächen über die content-Eigenschaft 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 mit CSS-Ankerpositionierung positionieren.

Zuerst wird ein Referenz-anchor-name auf die Liste gesetzt. Dann wird der position-Wert jeder Scroll-Schaltfläche auf absolute gesetzt und ihre position-anchor-Eigenschaft auf denselben Referenznamen festgelegt, der auf die Liste gesetzt wurde, um die beiden miteinander 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 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 der Schaltflächenkante und der Karussellkante 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);
}

Wenn wir den Code für die Scroll-Schaltflächen hinzufügen, 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, und beachten Sie dabei das Scroll-Snap-Verhalten. Beachten Sie auch, wie die "Vorherige" Schaltfläche automatisch deaktiviert wird, wenn die Liste zum Anfang des Inhalts gescrollt ist, während die "Nächste" Schaltfläche automatisch deaktiviert ist, wenn die Liste zum Ende des Inhalts gescrollt ist.

Scroll-Marker sind eine Gruppe von Schaltflächen, von denen jede das Karussell zu einer Position in Bezug auf eine der Inhaltsseiten scrollt. Sie bieten ein zusätzliches Navigationstool, das auch Ihren Fortschritt durch die Karussellseiten anzeigt.

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

• 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-Pseudoelement generiert wird; ihr Wert gibt an, wo die Scroll-Marker-Gruppe in der Tabulatorreihenfolge und Layoutbox-Reihenfolge des Karussells erscheint (aber nicht in der DOM-Struktur) — before platziert 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-Marker zu sammeln und anzuordnen.
• ::scroll-marker-Pseudoelemente existieren innerhalb der Kinder und ::column-Fragmente eines Vorfahren des Scroll-Containers und repräsentieren ihre Scroll-Marker. Diese werden innerhalb der ::scroll-marker-group des Vorfahren zum Layout 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 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-Pseudoelement der Liste relativ zum Karussell mittels CSS-Ankerpositionierung positioniert, ä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 ausgelegt, mit einem justify-content-Wert von center und einem gap von 20px, sodass ihre Kinder (die ::scroll-marker-Pseudoelemente) innerhalb der ::scroll-marker-group zentriert mit einem Abstand dazwischen angeordnet 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 behandeln wir das Aussehen und das Empfinden der eigentlichen Scroll-Marker; sie können wie jeder andere generierte Inhalt stilisiert werden. Es ist wichtig zu beachten, dass wir einen anderen Wert als none für die content-Eigenschaft setzen müssen, damit die Scroll-Marker tatsächlich generiert werden. Wir setzen außerdem einige grundlegende Stile, um die Marker 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 in diesem Abschnitt wird die :target-current Pseudoklasse verwendet, um auszuwählen, welcher Scroll-Marker derzeit der sichtbaren "Seite" entspricht und damit hervorheben, wie weit der Benutzer durch den Inhalt gescrollt hat. In diesem Fall setzen wir die background-color auf black, sodass es als gefüllter Kreis gestylt ist.

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

Alles aus dem obigen Code kombiniert sich zu folgendem Ergebnis:

Seit dem vorherigen Live-Beispiel wurden die Scroll-Marker 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 dann die Pfeiltasten zu verwenden, um durch jede Seite zu blättern.

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

Die zweite Demo ist ein Karussell mit mehreren Elementen pro Seite, das ebenfalls Scroll-Schaltflächen und Scroll-Marker zur Navigation durch die Seiten enthält. Diese Demo ist ebenfalls responsiv — je nach Viewport-Breite erscheinen verschiedene Anzahlen von Elementen auf jeder Seite.

Diese Demo ist sehr ähnlich der Karussell mit einzelnen Seiten Demo, außer dass anstelle von Flexbox für das Layout CSS multi-column layout und das ::column Pseudoelement verwendet werden, um beliebige Spalten zu erstellen, die die volle Breite des Karussells einnehmen und mehrere Elemente enthalten können.

Wenn wir diesen Ansatz verwenden, können wir sicher sein, dass, wenn der Viewport wächst oder schrumpft, während die Elementgröße konstant bleibt, nie ein teilweise angezeigtes Element über den Rand des Scrollports hinaus angezeigt wird. In diesem Fall werden die Scroll-Marker auf den Fragmenten des Scroll-Containers pro Spalte erstellt, anstatt auf den Kindern pro Element.

Das HTML ist dem der vorherigen Demo sehr ähnlich, außer dass es deutlich mehr Listenelemente gibt und da mehrere Elemente auf einmal sichtbar sind, wir sie als Items und nicht als Seiten bezeichnen:

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

Diese Demo hat ebenfalls 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 multi-column layout, anstelle von Flexbox, um die Karussell-Elemente zu layouten. Der columns-Wert von 1 zwingt jede Spalte, die volle Breite des Containers einzunehmen, wobei die Inhalte eine einzelne Spalte gleichzeitig anzeigen. Ein text-align-Wert von center wird ebenfalls angewendet, wodurch die Inhalte mit der Mitte der Liste ausgerichtet werden.

* {
  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 liefern rudimentäre Box-Styling für die Listenelemente und wenden dann Layout-Stile an, um ein oder mehrere Elemente in die einzelne Inhaltsspalte zu passen, abhängig von der Viewport-Breite. 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 gesetzt, um die Listenelemente nebeneinander zu setzen und die Liste horizontal scrollen zu lassen.
• Eine absolute width von 200px wurde auf ihnen gesetzt, um ihre Größe zu kontrollieren, was bedeutet, dass ein oder mehrere in eine Spalte passen, die sich zusammen mit der Breite des Viewports ausdehnt und zusammenzieht.
• Ein text-align-Wert von left wird auf sie gesetzt, um das text-align: center am übergeordneten Container zu überschreiben, damit der Inhalt der Elemente linksbündig ausgerichtet wird.

Die scroll-snap-align-Eigenschaft wird nun auf die ::column-Pseudoelemente gesetzt — die die Inhaltsspalten repräsentieren, die durch die columns-Eigenschaft generiert werden — statt auf die Listenelemente. Wir möchten zu jeder vollständigen Spalte anstatt zu jedem einzelnen Listenelement schnappen, um bei jedem Scrollvorgang neue Elemente anzuzeigen.

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-Marker in diesem Demo ist fast identisch mit dem der vorherigen Demo, außer dass die Selektoren unterschiedlich sind — die Scroll-Marker werden auf den generierten ::column-Scrollmarkern anstelle der Listenelemente erstellt (beachten Sie, wie wir hier zwei Pseudoelemente einbeziehen, um Scroll-Marker 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 dargestellt:

Versuchen Sie, zwischen den verschiedenen Seiten zu navigieren, indem Sie nach links und rechts wischen, die Scroll-Leiste verwenden, die Scroll-Schaltflächen drücken und die Scroll-Marker betätigen. Die Funktionalität ist ähnlich der des flexiblen Ein-Seiten-Karussell-Beispiels, außer dass jetzt mehrere Listenelemente in jeder navigierten Position vorhanden sind; die Scroll-Marker sind auf den Spaltenfragmenten gesetzt, die potenziell mehrere Elemente enthalten, anstatt auf jedem Element.

Versuchen Sie auch, die Bildschirmbreite zu ändern, und Sie werden sehen, dass sich die Anzahl der Listenelemente, die in die Liste passen, ändert — und daher auch die Anzahl der generierten Spalten. Da sich die Anzahl der Spalten ändert, werden die Scroll-Marker dynamisch aktualisiert, sodass jede Spalte in der Scroll-Marker-Gruppe dargestellt wird.

• CSS overflow Modul
• CSS anchor positioning Modul
• CSS scroll snap Modul
• CSS Carousel Gallery über chrome.dev (2025)