Erstellen von CSS-Karussells

Karussellkonzepte

Karussells sind ein häufiges Feature im Web. Sie nehmen normalerweise 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 auf Navigations-Buttons klicken oder diese aktivieren oder durch Wischen. Die Navigation umfasst in der Regel:

Scroll-Buttons

Im Allgemeinen "Voriges" und "Nächstes" Buttons oder Links.

Scroll-Marker

Eine Reihe von Button- oder Link-Icons, die jeweils ein oder mehrere Elemente repräsentieren, je nachdem, wie viele Elemente bei jeder Scroll-Position innerhalb des Karussells angezeigt werden.

Ein wesentliches Merkmal von Karussells ist Paginierung — die Elemente fühlen sich wie separate Inhaltsstücke an, zwischen denen man wechselt, anstatt einen kontinuierlichen Abschnitt zu bilden. Sie können ein Element zu einer Zeit oder mehrere Elemente auf jeder Karussell-"Seite" anzeigen. Wenn mehrere Elemente sichtbar sind, können Sie jedes Mal eine ganz neue Gruppe von Elementen anzeigen, wenn die Schaltfläche "Nächste" oder "Vorherige" 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 dem Sichtbereich verschwindet.

Karussells können ziemlich fehleranfällig und herausfordernd in der Implementierung mit JavaScript sein. Sie erfordern Skripte, um Scroll-Marker mit den Elementen zu verknüpfen, die sie darstellen, während die Scroll-Buttons kontinuierlich aktualisiert werden müssen, damit sie korrekt funktionieren.

Glücklicherweise können wir Karussells mit zugehörigen Steuerelementen ohne die Verwendung von JavaScript erstellen, indem wir CSS-Karussellfunktionen nutzen.

CSS-Karussellfunktionen

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

::scroll-button()

Diese Pseudoelemente werden innerhalb eines Scroll-Containers erzeugt und repräsentieren die Scroll-Buttons, die den Container in eine angegebene Richtung scrollen.

::scroll-marker-group

Wird innerhalb eines Scroll-Containers erzeugt und dient dazu, Scroll-Marker zu sammeln und anzuordnen.

::scroll-marker

Wird innerhalb der Kinder eines Vorfahren-Scrollcontainers oder innerhalb der Spalten eines Scrollcontainers erzeugt, um deren Scrollmarker darzustellen. Diese können ausgewählt werden, um den Container zu ihren zugehörigen Kind-Elementen oder Spalten zu scrollen, und werden im ::scroll-marker-group des Scrollcontainers zu Layoutzwecken gesammelt.

:target-current

Wird verwendet, um den aktuell aktiven Scroll-Marker auszuwählen und zu stylen. Die Möglichkeit, den aktiven Scroll-Marker zu stylen, ist sowohl für die Benutzerfreundlichkeit als auch für die Zugänglichkeit wichtig.

:target-before und :target-after

Werden verwendet, um Scroll-Marker vor und nach dem aktuell aktiven Scroll-Marker auszuwählen und zu stylen. Sie sind nützlich, um Navigationsobjekte zu stylen, die sich vor und nach der aktiven Navigationsposition befinden und anzugeben, welche Elemente der Benutzer bereits angesehen hat und welche noch kommen werden.

::column

Repräsentiert die einzelnen Spalten, die erstellt werden, wenn ein Container so eingestellt ist, dass sein Inhalt über mehrere Spalten via CSS Multi-Column Layout angezeigt wird. Das ::column Pseudoelement kann zusammen mit ::scroll-marker verwendet werden, um einen Scroll-Marker für jede Spalte zu erstellen.

Karussell mit Einzelseiten

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

Wir werden Flexbox verwenden, um das Karussell zu layouten, Scroll-Snapping verwenden, um eine klare Paginierung durchzusetzen, und Ankerpositionierung, um die Scroll-Buttons zu positionieren und Scroll-Marker relativ zum Karussell anzubringen.

Das HTML besteht aus einem Heading-Element und einer ungeordneten Liste, wobei jedes Listenelement einige Beispielinhalte enthält, zusammen mit einem benutzerdefinierten data- Attribut (welches 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>

Karusselllayout mit Flexbox

Wir verwenden Flexbox, um eine einzelne Zeile von Elementen zu erstellen; das <ul> ist der Flexcontainer, 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 Ansichtsbereichs mit einer Breite width von 100vw füllt; sie erhält auch eine height von 300px und etwas padding. Dann verwenden wir Flexbox, um die Liste zu layouten – indem wir einen display Wert von flex setzen, um die Kinderlistenelemente in einer Zeile anzuzeigen (aufgrund des Standardwertes flex-direction von row), mit einem gap von 4vw zwischen jedem Element.

* {
  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 Zeit, die Listenelemente zu stylen. Die ersten Deklarationen bieten rudimentäres Styling. Die wichtige Deklaration ist der flex Wert von 0 0 100%, welcher jedes Element dazu zwingt, so breit wie der Container (das <ul>) zu sein. Dadurch wird der Inhalt seinen Container überlaufen, und der Ansichtsbereich 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;
}

Zusätzlich erhält jedes gerade nummerierte Listenelement eine andere Hintergrundfarbe über :nth-child(), sodass der Scrolleffekt leichter zu erkennen ist.

Scroll-Snapping auf der Liste einrichten

In diesem Abschnitt setzen wir einen Overflow-Wert auf das <ul>, um es in einen Scroll-Container zu verwandeln, und wenden dann CSS-Scroll-Snapping an, um die Liste in die Mitte jedes Listenelements zu schnappen, 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 dass der gesamte Ansichtsbereich scrollt. CSS-Scroll-Snap wird dann 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 x Schlüsselwort führt dazu, dass die Snap-Ziele des Containers horizontal geschnappt werden, während das mandatory Schlüsselwort bedeutet, dass der Container immer zu einem Snap-Ziel am Ende einer Scroll-Aktion schnappen 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, sodass, wenn die Liste gescrollt wird, sie in die Mitte jedes Listenelements schnappt.

li {
  scroll-snap-align: center;
}

Der bis jetzt gezeigte Code wird wie folgt dargestellt:

Versuchen Sie, die Liste durch Wischen oder mit der Scrollleiste zu scrollen, um den Scroll-Snapshot zu sehen. Egal wo Ihre Scroll-Bewegung endet, ein Element wird immer in seine Position "schnappen".

Scroll-Buttons erstellen

In diesem Abschnitt fügen wir der Demo "Vorherige" und "Nächste" Scroll-Buttons hinzu, um ein Tool für die Navigation zwischen Karussellseiten bereitzustellen. Dies wird unter Verwendung des ::scroll-button() Pseudoelements erreicht.

Die ::scroll-button() Pseudoelemente erzeugen nur dann Buttons innerhalb eines Scroll-Containers, wenn ihre content Eigenschaften auf einen anderen Wert als none gesetzt sind. Jedes ::scroll-button() repräsentiert einen Scroll-Button, dessen Scrollrichtung durch das Argument des Selektors angegeben wird. Sie können bis zu vier Scroll-Buttons pro Scroll-Container generieren, die jeweils den Inhalt des Containers in Richtung des Anfangs oder Endes 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-Buttons mit einigen rudimentären Stilen sowie Stylings basierend auf verschiedenen Zuständen versehen. Es ist wichtig, :focus Stile für Tastaturbenutzer zu setzen. Da Scroll-Buttons automatisch auf disabled gesetzt werden, wenn kein weiteres Scrollen in dieser Richtung mehr möglich ist, verwenden wir die :disabled Pseudoklasse, um diesen Zustand anzusprechen.

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 entsprechendes Icon auf die linken und rechten Scroll-Buttons über die content Eigenschaft gesetzt, was auch das ist, was die Scroll-Buttons tatsächlich erzeugt. Dieses Icon muss auch einen entsprechenden einfachen Text-Zugänglichen Namen haben, also verwenden Sie die Alternative-Text Funktion der content Eigenschaft (mit dem Vorbehalt, dass dies möglicherweise immer noch nicht ausreicht, um WCAG zu erfüllen):

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

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

Positionierung der Scroll-Buttons

Wir haben die Scroll-Buttons erstellt. Nun werden wir sie relativ zum Karussell mit Hilfe der CSS-Ankerpositionierung positionieren.

Zuerst wird ein Referenz-anchor-name auf der Liste gesetzt. Als nächstes wird die position jedes Scroll-Buttons auf absolute gesetzt, und seine position-anchor Eigenschaft auf denselben Referenznamen, der auf der Liste definiert ist, um die beiden zu verknüpfen.

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

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

Um jeden Scroll-Button tatsächlich zu positionieren, setzen wir Werte auf ihre Einfügungs-Eigenschaften. Wir verwenden anchor() Funktionen, um die angegebenen Seiten der Buttons relativ zu den Seiten des Karussells zu positionieren. In jedem Fall wird die calc() Funktion verwendet, um etwas Abstand zwischen dem Buttonrand und dem Karussellrand hinzuzufügen. Zum Beispiel wird die rechte Kante des linken Scroll-Buttons 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 Scroll-Button-Code einfügen, erhalten wir folgendes Ergebnis:

Versuchen Sie, die "vorherigen" und "nächsten" Scroll-Buttons zu drücken, um zu sehen, wie die Seiten gescrollt werden, wobei die Scroll-Snapping-Funktionalität respektiert wird. Beachten Sie auch, dass der "vorherige" Button automatisch deaktiviert wird, wenn die Liste zum Anfang des Inhalts gescrollt ist, während der "nächste" Button automatisch deaktiviert wird, wenn die Liste zum Ende des Inhalts gescrollt ist.

Scroll-Marker erstellen

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

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

• Die scroll-marker-group Eigenschaft wird auf das Scroll-Containerelement gesetzt. Sie muss auf einen nicht none Wert gesetzt werden, damit das ::scroll-marker-group Pseudoelement erzeugt wird; sein Wert gibt an, wo die Scroll-Marker-Gruppe in der Tabulatorreihenfolge des Karussells und der Layout-Box-Reihenfolge erscheint (aber nicht der DOM-Struktur) — before platziert sie am Anfang, vor den Scroll-Buttons, während after sie am Ende platziert.
• Das ::scroll-marker-group Pseudoelement existiert innerhalb eines Scroll-Containers und wird verwendet, um Scroll-Marker als ganze Gruppe zu sammeln, zu enthalten und anzuordnen.
• ::scroll-marker Pseudoelemente existieren innerhalb der Kinder und ::column-Fragmente eines Vorfahren-Scroll-Containers und repräsentieren ihre Scroll-Marker. Diese werden innerhalb des Vorfahren-::scroll-marker-group zu Layoutzwecken gesammelt.

Zunächst 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 Layout-Box-Reihenfolge platziert wird; dies bedeutet, dass es nach den Scroll-Buttons kommt:

ul {
  scroll-marker-group: after;
}

Als nächstes wird das ::scroll-marker-group Pseudoelement der Liste relativ zum Karussell mit CSS-Ankerpositionierung positioniert, ähnlich wie die der Scroll-Buttons, außer dass es horizontal auf das Karussell zentriert wird, indem ein justify-self Wert von anchor-center genutzt wird. Die Gruppe wird mit Flexbox layoutet, mit einem justify-content Wert von center und einer gap von 20px, sodass ihre Kinder (die ::scroll-marker Pseudoelemente) in der ::scroll-marker-group zentriert sind, mit einem Abstand zwischen jedem Element.

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 kümmern wir uns um das Aussehen und das Gefühl der Scroll-Marker selbst; sie können wie jeder andere generierte Inhalt gestylt werden. Es ist wichtig zu beachten, dass wir einen nicht none Wert für die content Eigenschaft setzen müssen, damit die Scroll-Marker tatsächlich erzeugt werden. Ein Wert von "" erzeugt einen leeren zugänglichen Namen (ein WCAG SC 4.1.2 Name, Rolle, Wert Verstoß), daher ist es notwendig, einen Textwert bereitzustellen. Da das gleiche Aktualisieren eines jeden Markers möglicherweise für Benutzer nicht nützlich ist, sollten Sie attr() verwenden, um den Wert aus einem benutzerdefinierten data- Attribut auf dem <li> zu ziehen (dieses Beispiel sucht nach einem Attribut data-accName). Verstehen Sie, dass dieser Wert nicht von automatisierten Übersetzungsdiensten erkannt wird.

Wir setzen auch einige rudimentäre Stile, damit die Marker als umrandete Kreise erscheinen, während der Textinhalt visuell ausgeblendet wird, den wir hinzugefügt haben:

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 verwenden wir die :target-current Pseudoklasse, um den Scroll-Marker auszuwählen, der der aktuell sichtbaren "Seite" entspricht, und damit anzuzeigen, wie weit der Benutzer durch den Inhalt gescrollt hat. In diesem Fall setzen wir die background-color auf black, sodass es als ausgefüllter Kreis gestylt ist.

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

Endergebnis des Karussells mit einer einzigen Seite

Aller obiger Code kombiniert ergibt folgendes 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 wechseln 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 Scrollleiste ziehen oder die Scroll-Buttons drücken.

Responsives Karussell: Mehrere Elemente pro Seite

Beim zweiten Beispiel handelt es sich um ein Karussell mit mehreren Elementen pro Seite, das erneut Scroll-Buttons und Scroll-Marker zum Navigieren durch die Seiten enthält. Dieses Beispiel ist auch responsiv — je nach Breite des Ansichtsbereichs erscheinen unterschiedliche Anzahlen von Elementen auf jeder Seite.

Dieses Beispiel ähnelt sehr dem Karussell mit Einzelseiten, außer dass es anstelle von Flexbox für das Layout CSS Multi-Column Layout und das ::column Pseudoelement verwendet, um beliebige Spalten zu erstellen, die die volle Breite des Karussells über die CSS Multi-Column Layout Funktion und das ::column Pseudoelement erstrecken, um beliebige Spalten zu erstellen, die die volle Breite des Karussells einnehmen und mehrere Elemente enthalten können.

Mit diesem Ansatz können wir sicherstellen, dass, wenn der Ansichtsbereich wächst oder schrumpft, während die Elementgröße konstant bleibt, niemals ein teilweise ausgeblendetes Element am Rand des Scrollports angezeigt wird. In diesem Fall werden die Scroll-Marker auf Scrollcontainer-Fragmenten, pro Spalte, anstatt auf Kindern, pro Element, erstellt.

Das HTML ist dem des vorherigen Beispiels sehr ähnlich, außer dass es deutlich mehr Listenelemente gibt und, da mehrere Elemente gleichzeitig sichtbar sein werden, beschriften wir sie als Elemente statt Seiten:

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

Dieses Beispiel 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>

Karusselllayout mit Spalten

Dieses Beispiel verwendet CSS Multi-Column Layout, anstelle von Flexbox, um die Karussellelemente zu layouten. Der columns Wert von 1 erzwingt, dass jede Spalte die volle Breite des Containers einnimmt, wobei die Inhalte eine einzige Spalte gleichzeitig 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: "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 bieten rudimentäres Box-Styling für die Listenelemente an, dann wenden wir Layout-Stile an, die es ermöglichen, dass ein oder mehrere Elemente in die einzelne Inhalts Spalte passen, abhängig von der Breite des Ansichtsbereichs. 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 Hauptlayout-Eigenschaften sind wie folgt:

• Ein display Wert von inline-block wurde gesetzt, um die Listenelemente nebeneinander zu platzieren und die Liste horizontal scrollen zu lassen.
• Eine absolute width von 200px wurde auf sie gesetzt, um ihre Größe zu kontrollieren, was bedeutet, dass eine oder mehrere in einer Spalte passen werden, die mit der Breite des Ansichtsbereichs wächst und schrumpft.
• Ein text-align Wert von left wird auf sie gesetzt, um das text-align: center zu überschreiben, das auf den übergeordneten Container gesetzt ist, sodass der Elementinhalt 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 wollen zu jeder vollständigen Spalte schnappen, 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: 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-Marker

Das CSS zur Erstellung der Scroll-Marker in diesem Beispiel ist nahezu identisch zum vorherigen Beispiel, außer dass die Selektoren unterschiedlich sind — die Scroll-Marker werden auf den generierten ::column Pseudoelementen erstellt statt auf den Listenelementen. Beachten Sie, wie wir hier zwei Pseudoelemente hinzufügen, um Scroll-Marker 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;
}

Schließlich verwenden wir die :target-current Pseudoklasse, um den aktiven Scroll-Marker zu markieren, was dem Benutzer eine Idee gibt, wo er sich in der Navigation befindet. Wir verwenden auch die :target-before und :target-after Pseudoklassen, um ein benutzerdefiniertes Styling auf die Scroll-Marker vor und nach dem aktiven zu setzen. Wir setzen auch eine transition auf die ul::column::scroll-marker:target-current Regel, sodass die Stiländerungen zwischen den verschiedenen Zuständen nahtlos animieren.

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

Endergebnis des responsiven Karussells

Das Responsive-Karussell wird wie folgt gerendert:

Versuchen Sie, zwischen den verschiedenen Seiten zu navigieren, indem Sie nach links und rechts wischen, die Scrollleiste verwenden, die Scroll-Buttons drücken und die Scroll-Marker drücken. Die Funktionalität ist ähnlich wie beim flexiblen Einzelseitigen Beispiel, außer dass jetzt mehrere Listenelemente in jeder navigierten Position sind; die Scroll-Marker werden auf Spalten-Fragmenten gesetzt, die möglicherweise mehrere Elemente enthalten, anstatt auf jedem Element.

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

Siehe auch

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