Erstellen von CSS-Karussellen

Karussellkonzepte

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

Benutzer können durch Klicken oder Aktivieren von Navigationsschaltflächen oder durch Wischen durch die Elemente navigieren. Die Navigation umfasst in der Regel:

Scrollschaltflächen

In der Regel "Zurück" und "Weiter" Schaltflächen oder Links.

Scroll-Markierungen

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

Ein wesentliches Merkmal von Karussellen ist die Seitennavigation – die Elemente fühlen sich an wie separate Inhaltsstücke, zwischen denen gewechselt wird, anstatt einen kontinuierlichen Inhaltsabschnitt zu bilden. Sie könnten ein Element nach dem anderen oder mehrere Elemente auf jeder Karussell-"Seite" zeigen. Wenn mehrere Elemente sichtbar sind, könnten Sie eine völlig neue Gruppe von Elementen jedes Mal anzeigen, wenn die Schaltfläche "Weiter" oder "Zurück" gedrückt wird. Alternativ könnten Sie ein einzelnes neues Element an einem Ende der Liste hinzufügen, während das Element am anderen Ende aus der Ansicht verschoben wird.

Karusselle können ziemlich brüchig und herausfordernd sein, wenn sie mit JavaScript umgesetzt werden. Sie erfordern Skripte, um Scroll-Markierungen mit den Elementen zu verknüpfen, die sie darstellen, während sie die Scrollschaltflächen ständig aktualisieren, damit sie korrekt funktionieren.

Glücklicherweise können wir Karusselle mit zugehörigen Steuerungen ohne die Verwendung von JavaScript erstellen, indem wir CSS-Karussellfunktionen verwenden.

CSS-Karussellfunktionen

Die CSS-Karussellfunktionen bieten Pseudoelemente und Pseudoklassen, die die Erstellung von Karussellen nur mit CSS und HTML ermöglichen, wobei der Browser die meisten Scroll- und Linkreferenzen auf flexible und konsistente Weise behandelt. Diese Funktionen sind wie folgt:

::scroll-button()

In einem Scroll-Container generiert, repräsentieren diese Pseudoelemente Scrollschaltflächen, die den Container in eine angegebene 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 deren Scroll-Markierungen 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 zur Layoutzwecken gesammelt.

:target-current

Wird verwendet, um die aktuell aktive Scroll-Markierung auszuwählen und zu stylen. Die Fähigkeit, die aktive Scroll-Markierung zu stylen, ist wichtig für sowohl die Benutzerfreundlichkeit als auch Zugänglichkeit.

:target-before und :target-after

Werden verwendet, um Scroll-Markierungen vor und nach der aktuell aktiven Scroll-Markierung auszuwählen und zu stylen. Sie sind nützlich, um Navigationspunkte zu stylen, die vor und nach der aktiven Navigationsposition liegen, und zeigen an, welche Elemente der Benutzer bereits gesehen hat und welche noch kommen.

::column

Repräsentiert die einzelnen Spalten, die generiert werden, wenn ein Container so eingestellt ist, dass er seinen Inhalt in mehreren Spalten über das CSS-Mehrspalten-Layout anzeigt. Das ::column Pseudoelement kann zusammen mit ::scroll-marker verwendet werden, um eine Scroll-Markierung für jede Spalte zu erzeugen.

Karussell mit einzelnen Seiten

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

Wir verwenden Flexbox, um das Karussell zu layouten, Scroll-Snap, um eine klare Seitennavigation zu erzwingen, und Anker-Positionierung, um die Position der Scrollschaltflächen und Scroll-Markierungen relativ zum Karussell festzulegen.

Das HTML besteht aus einem Überschriftenelement und einer ungeordneten Liste, wobei jedes Listenelement Beispielinhalte zusammen mit einem benutzerdefinierten data- Attribut enthält (das wir mit dem Styling erklären):

<h1>CSS carousel single item per page</h1>
<ul>
  <li data-accName="Item 1">
    <h2>Page 1</h2>
  </li>
  <li data-accName="Item 2">
    <h2>Page 2</h2>
  </li>
  <li data-accName="Item 3">
    <h2>Page 3</h2>
  </li>
  <li data-accName="Item 4">
    <h2>Page 4</h2>
  </li>
</ul>

Karussell-Layout mit Flexbox

Wir verwenden Flexbox, um eine einzelne Reihe von Elementen zu erstellen; Die <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 gestaltet, dass sie die volle Breite des Ansichtsfensters mit einer Breite von 100vw ausfüllt; es wird auch eine height von 300px und ein bisschen padding angewendet. Wir verwenden dann Flexbox, um die Liste zu layouten – wir setzen einen display-Wert von flex, um die Kind-Listenelemente in einer Reihe anzuzeigen (aufgrund des Standardwerts flex-direction von row), mit einem gap von 4vw zwischen jedem.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica", "Arial", 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 stylen. Die ersten Deklarationen bieten rudimentäres Styling. Die wichtige Deklaration ist der flex-Wert von 0 0 100%, der jedes Element dazu zwingt, so breit wie der Container (die <ul>) zu sein. Dadurch wird der Inhalt den Container überfließen, und das Ansichtsfenster wird horizontal scrollen.

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

  flex: 0 0 100%;
}

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

Darüber hinaus erhält jedes gerade nummerierte Listenelement eine andere Hintergrundfarbe über :nth-child(), damit der Scrolleffekt leichter zu sehen ist.

Einrichten von Scroll-Snap auf der Liste

In diesem Abschnitt setzen wir einen Überlaufwert auf die <ul>, um sie in einen Scroll-Container zu verwandeln, und wenden dann CSS-Scroll-Snap an, damit die Liste zu einem bestimmten Punkt jedes Listenelements einrastet, wenn der Inhalt gescrollt wird.

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

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 beim Scrollen in 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 des Scrollbalkens zu scrollen, um den Scroll-Snap-Effekt zu sehen. Egal wo Sie Ihre Scroll-Bewegung beenden, ein Element wird immer an seinem Platz "einrasten".

Erstellen von Scrollschaltflächen

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

Die ::scroll-button() Pseudoelemente generieren Schaltflächen innerhalb eines Scroll-Containers nur, wenn 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 des Starts oder Endes der Block- oder Inline-Achse scrollen.

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

Zuerst werden alle Scrollschaltflächen mit einigen grundlegenden Styles versehen, sowie Styles basierend auf unterschiedlichen Zuständen. Es ist wichtig, :focus-Styles für Tastaturnutzer zu setzen. Außerdem werden die Scrollschaltflächen automatisch auf disabled gesetzt, wenn kein weiteres Scrollen in diese Richtung möglich ist; wir verwenden die :disabled Pseudoklasse, um diesen Zustand zu adressieren.

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

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  opacity: 1;
}

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

ul::scroll-button(*):disabled {
  opacity: 0.2;
  cursor: unset;
}

Als nächstes wird ein passendes Icon auf die linken und rechten Scrollschaltflächen über die content Eigenschaft gesetzt, was auch verursacht, dass die Scrollschaltflächen generiert werden. Dieses Icon muss auch einen entsprechenden Klartext-bezogenen Namen haben, daher wird die Alternative Text Funktion der content Eigenschaft verwendet (mit dem Hinweis, dass dies immer noch unzureichend sein kann, um WCAG zu erfüllen):

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

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

Positionierung der Scrollschaltflächen

Wir haben die Scrollschaltflächen erstellt. Nun werden wir sie relativ zum Karussell positionieren, indem wir CSS-Ankerpositionierung verwenden.

Zunächst wird ein Referenz-anchor-name auf der Liste gesetzt. Anschließend hat jede Scroll-Schaltfläche ihre position auf absolute gesetzt, und ihre position-anchor Eigenschaft auf denselben Referenznamen definiert, um die beiden miteinander zu verbinden.

ul {
  anchor-name: --my-carousel;
}

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

Um jede Scroll-Schaltfläche tatsächlich zu positionieren, setzen wir Werte auf ihre Einrückungseigenschaften. 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 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);
}

Indem wir den Scrollschaltcode hinzufügen, erhalten wir das folgende Ergebnis:

Versuchen Sie, die Schaltflächen "Zurück" und "Weiter" zu drücken, um zu sehen, wie die Seiten gescrollt werden, respektierend das Scroll-Snap-Verhalten. Beachten Sie auch, wie die Schaltfläche "Zurück" automatisch deaktiviert wird, wenn die Liste zum Anfang des Inhalts gescrollt wird, während die "Weiter" Schaltfläche automatisch deaktiviert wird, wenn die Liste zum Ende des Inhalts gescrollt wird.

Erstellen von Scroll-Markierungen

Scroll-Markierungen sind eine Gruppe von Schaltflächen, von denen jeder das Karussell zu einer Position im Zusammenhang mit einer der Inhaltsseiten scrollt. Sie bieten ein zusätzliches Navigationswerkzeug, das auch Ihren Fortschritt durch die Karussellseiten anzeigt.

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

• Die Eigenschaft scroll-marker-group wird auf das Scroll-Container-Element gesetzt. Es muss auf einen Wert ungleich none gesetzt werden, damit das ::scroll-marker-group Pseudoelement generiert wird; ihr Wert gibt an, wo die Scroll-Markierungsgruppe in der Tabulator- und Layout-Box-Reihenfolge des Karussells erscheint (aber nicht in der DOM-Struktur) — before platziert sie am Anfang, vor den Scrollschaltflächen, während after sie am Ende platziert.
• Das ::scroll-marker-group Pseudoelement existiert in einem Scroll-Container und wird verwendet, um Scroll-Markierungen als gesamte Gruppe zu sammeln, zu enthalten und anzuordnen.
• ::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’s ::scroll-marker-group für Layoutzwecke gesammelt.

Zunächst wird die Eigenschaft scroll-marker-group 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 Scrollschaltflächen kommt:

ul {
  scroll-marker-group: after;
}

Als nächstes wird das ::scroll-marker-group Pseudoelement positioniert, ähnlich wie die Scroll-Schaltflächen, außer dass es horizontal auf dem Karussell mit einem justify-self Wert von anchor-center zentriert ist. Die Gruppe wird mit Flexbox layoutet, mit einem justify-content Wert von center und einem gap von 20px, damit ihre Kinder (die ::scroll-marker Pseudoelemente) innerhalb des ::scroll-marker-group zentriert werden, mit einem Abstand zwischen jedem.

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

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

Als nächstes behandeln wir das Aussehen und Gefühl der Scroll-Markierungen selbst; sie können wie jeder andere erzeugte Inhalt gestylt werden. Es ist wichtig zu beachten, dass wir einen nicht-none-Wert für die Eigenschaft content setzen müssen, damit die Scroll-Markierungen tatsächlich erzeugt werden. Ein Wert von "" produziert einen leeren zugänglichen Namen (ein WCAG SC 4.1.2 Name, Role, Value Verstoß), daher ist es notwendig, einen Textwert anzugeben. Da jeder Scroll-Markierung denselben Namen zugeordnet zu haben möglicherweise für Benutzer nicht nützlich ist, sollten Sie attr() verwenden, um den Wert aus einem benutzerdefinierten data- Attribut auf der <li> zu ziehen (in diesem Beispiel wird nach einem Attribut data-accName gesucht). Seien Sie sich bewusst, dass dieser Wert nicht von automatisierten Übersetzungsdiensten aufgenommen wird.

Wir setzen auch einige rudimentäre Styles, um die Markierungen als umrandete Kreise darzustellen, während wir den Textinhalt, den wir hinzugefügt haben, visuell ausblenden:

li::scroll-marker {
  content: attr(data-accName);
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 50%;
  overflow: hidden;
  text-indent: 16px;
}

Schließlich für diesen Abschnitt wird die :target-current Pseudoklasse verwendet, um auszuwählen, welche Scroll-Markierung 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 gefüllter Kreis gestylt wird.

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

Endergebnis des einzelnen Seiten-Karussells

All dieser Code führt gemeinsam zum folgenden Ergebnis:

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 wird, damit Sie sehen können, wo Sie sich in der Seitennavigation befinden. Versuchen Sie auch, zur Scroll-Markierungsgruppe zu tabben und dann die Pfeiltasten zu verwenden, um jede Seite zu durchlaufen.

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

Responsives Karussell: Mehrere Elemente pro Seite

Die zweite Demo ist ein Karussell mit mehreren Elementen pro Seite, das erneut Scrollschaltflächen und Scroll-Markierungen enthält, um durch die Seiten zu navigieren. Diese Demo ist auch responsiv – je nach Ansichtsfensterbreite erscheinen unterschiedliche Anzahl von Elementen auf jeder Seite.

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

Durch diese Herangehensweise können wir sicherstellen, dass, wenn das Ansichtsfenster wächst oder schrumpft, während die Elementgröße konstant bleibt, nie ein teilweise angezeigt wird, das über den Rand des Scrollports hinausragt. In diesem Fall werden die Scroll-Markierungen auf Scroll-Container-Fragmenten, pro Spalte, erstellt anstatt auf den Kindern, pro Element.

Das HTML ähnelt stark dem der vorherigen Demo, außer dass es erheblich mehr Listenelemente gibt, und da mehrere Elemente auf einmal sichtbar sein werden, bezeichnen wir sie als Elemente anstatt als Seiten:

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

Diese Demo hat auch sehr ähnliches 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>

Karussell-Layout mit Spalten

Dieses Beispiel verwendet CSS-Mehrspalten-Layout, anstatt von Flexbox, um die Karussellelemente anzuordnen. Der columns Wert von 1 zwingt jede Spalte dazu, die volle Breite des Containers einzunehmen, wobei die Inhalte eine einzelne Spalte gleichzeitig anzeigen. Ein text-align Wert von center wird ebenfalls angewendet, um die Inhalte mit dem Zentrum der Liste auszurichten.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica", "Arial", 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 rudimentäre Kastenstile für die Listenelemente bereit und wenden dann Layout-Stile an, um ein oder mehrere Elemente in die einzelne Inhalts-Spalte zu passen, abhängig von der Ansichtsfensterbreite. 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: #eeeeee;
  border: 1px solid #dddddd;
  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 sitzen zu lassen und die Liste horizontal scrollen zu lassen.
• Eine absolute width von 200px wurde auf sie gesetzt, um ihre Größensteuerung zu ermöglichen. Dies bedeutet, dass eine oder mehrere in eine Spalte passen, die zusammen mit der Breite des Ansichtsfensters wächst und schrumpft.
• Ein text-align Wert von left wird auf sie gesetzt, um die text-align: center des übergeordneten Containers zu überschreiben, sodass der Inhalt der Elemente linksbündig ist.

Die scroll-snap-align Eigenschaft wird nun auf die ::column Pseudoelemente gesetzt — die die Inhaltsspalten repräsentieren, die durch die columns Eigenschaft generiert werden — anstatt der Listenelemente. Wir möchten auf jede vollständige Spalte anstelle eines einzelnen Listenelements einrasten, wobei bei jeder Scroll-Aktion alle neuen Elemente angezeigt werden.

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

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

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  opacity: 1;
}

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

ul::scroll-button(*):disabled {
  opacity: 0.2;
  cursor: unset;
}

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

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

ul {
  anchor-name: --my-carousel;
}

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

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: --my-carousel;
  top: calc(anchor(bottom) - 70px);
  justify-self: anchor-center;
  display: flex;
  justify-content: center;
  gap: 20px;
}

Spalten-Scroll-Markierungen

Das CSS zum Erstellen der Scroll-Markierungen in diesem Demo ist nahezu identisch mit dem im vorherigen Demo, außer dass die Selektoren unterschiedlich sind — die Scroll-Markierungen werden auf den generierten ::column Pseudoelementen anstelle von Listenelementen erstellt. Beachten Sie, dass wir hier zwei Pseudoelemente einschließen, um Scroll-Markierungen auf den generierten Spalten zu erstellen.

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

Zum Schluss verwenden wir die :target-current Pseudoklasse, um die aktive Scroll-Markierung zu markieren und dem Benutzer eine Vorstellung davon zu geben, wo er sich in der Navigation befindet. Wir verwenden auch die :target-before und :target-after Pseudoklassen, um benutzerdefinierte Stile auf die Scroll-Markierungen vor und nach der aktiven anzuwenden. Wir setzen auch eine transition auf die ul::column::scroll-marker:target-current Regel, damit die Stiländerungen zwischen den verschiedenen Zuständen reibungslos animiert werden.

ul::column::scroll-marker:target-before {
  border: 2px solid gray;
}

ul::column::scroll-marker:target-current {
  background-color: black;
  transition: all 0.7s;
}

ul::column::scroll-marker:target-after {
  border: 2px solid red;
  background-color: red;
}

Finales Ergebnis des responsiven Karussells

Das Responsiv-Karussell wird wie folgt gerendert:

Versuchen Sie, zwischen den verschiedenen Seiten zu navigieren, indem Sie nach links und rechts wischen, den Scrollbalken verwenden, die Scroll-Schaltflächen drücken und die Scroll-Markierungen betätigen. Die Funktionalität ist ähnlich wie im Flexbox-Einzelseitendemonstration, außer dass jetzt mehrere Listenelemente bei jeder navigierten Position vorhanden sind; die Scroll-Markierungen werden auf den Spaltenfragmenten gesetzt, die möglicherweise mehrere Elemente enthalten, anstelle jedes Elements.

Versuchen Sie auch, die Bildschirmbreite zu ändern, und Sie werden sehen, dass sich die Anzahl der Listenelemente, die in die Liste passen, ändert — und damit ändert sich auch die Anzahl der erzeugten 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.

Siehe auch

• CSS-Überlaufmodul
• CSS-Ankerpositionierungsmodul
• CSS-Scroll-Snap-Modul
• CSS-Karussell-Galerie über chrome.dev (2025)