Carrousels met CSS

Adam Argyle

Gepubliceerd: 20 maart 2025

Vanaf Chrome 135 kunt u gebruikmaken van functies uit de CSS Overflow 5-specificatie die zijn ontworpen om scroll- en carrouselervaringen te creëren.

Dit bericht geeft een overzicht van de vele verschillende scroll- en carrouselervaringen die met deze nieuwe functies en zonder JavaScript tot stand zijn gekomen. Bekijk de volgende video en wees enthousiast over wat er nu mogelijk is.

In de video wordt een samenspel getoond van scrollknoppen, scrollmarkeringen, scrollgestuurde animatie, scroll-state() query's, :has(), raster, anker en nog veel meer.

Nog indrukwekkender is het toegankelijkheidsverhaal.

De browser hanteert best practices voor carrousels, dankzij de samenwerking tussen de engineering- en toegankelijkheidsteams. Het zou heel moeilijk zijn om een ​​toegankelijkere carrousel te maken dan deze.

Maak kennis met ::scroll-button() ::scroll-marker() ()

Een carrousel is een scrollgebied met maximaal twee toegevoegde UI-functies: knoppen en markeringen.

In versie één van de CSS-carrouselfuncties worden de knoppen en markeringen gemaakt met CSS. De browser plaatst de elementen als neven, met de juiste rollen, in de juiste tabvolgorde en behoudt hun status. Dit maakt het ontwikkelen van een toegankelijke carrousel eenvoudiger.

• Scrollknoppen
  Door de browser geleverde, stateful en interactieve scroll-ability <button> -elementen die helpen bij de toegang tot inhoud en het scrollen van 85% van een scrollgebied wanneer erop wordt gedrukt.

• Scrollmarkeringen
  Door de browser geleverde, stateful navigatie <a> -elementen die helpen bij de toegang tot de inhoud van elk opgevraagd item in het scrollgebied.

In de rest van dit bericht leggen we uit hoe u met behulp van deze nieuwe functies een carrousel kunt bouwen.

Begin met een scroller

U kunt knoppen en markeringen toevoegen aan elk scrollgebied op uw site.

De volgende CSS creëert een basisscrollgebied dat in latere stappen gebruikt kan worden om knoppen en markeringen aan toe te voegen. Scroll snapping is niet vereist voor een carrousel, maar in dit voorbeeld wordt het wel gebruikt. Carrousels werken ook voor verticale scrollers en bidirectionele scrollers.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

Voeg scrollknoppen toe met ::scroll-button()

Afhankelijk van je besturingssysteem kunnen er al scrollknoppen rond je schuifbalken zitten. Ingebouwde schuifbalkknoppen hebben de neiging om een ​​scrollgebied te verschuiven, terwijl CSS-scrollknoppen 85% van het scrollgebied beslaan.

Voor carrousels die slechts één item over de volledige breedte tegelijk weergeven met scroll-snappunten , lijkt dit op een item-voor-item-hoeveelheid. Voor lange lijsten met items waarvan er meer dan één tegelijk zichtbaar is, scrolt het bijna een volledige pagina.

Om scrollknoppen toe te voegen met CSS:

1. Voeg ze toe zoals andere pseudo-elementen, met een selector: .carousel::scroll-button(right) voor een knop om naar rechts te scrollen.
2. Geef content op met optionele toegankelijke alternatieve alt-tekst .

De browser creëert echte knoppen, met jouw content erin, als zusterknoppen van de scroller. Je kunt deze knoppen nu naar eigen wens indelen, stylen of anchor() gebruiken. De volgende CSS maakt er twee: één voor een scrollknop naar links en één voor een scrollknop naar rechts.

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*):focus-visible {
    outline-offset: 5px;
  }
}

Voeg scrollmarkeringen toe met ::scroll-marker()

Net als het scrollbalk-duimelement kunnen CSS-scrollmarkeringen een indicatie geven van de grootte van de carrousel en tegelijkertijd de mogelijkheid bieden om snel naar het einde of begin te gaan. Een CSS-scrollmarkering verschilt van de schuifbalk omdat elke markering een link is die elk item in de scrollbalk kan vertegenwoordigen.

Een voorbeeld van dit onderscheid: neem de seizoenen van een tv-serie. In plaats van een markering voor elk van de 10 afleveringen, maak je 2 markeringen die naar het begin van het hoofdstuk gaan.

Merk op dat deze markers geen stippen zijn, maar de eigenschap content: "Season 1" van hun pseudo-element. Markers kunnen ook miniaturen zijn, die vaak worden gebruikt voor galerijcarrousels in e-commerce of op foto's gerichte websites.

Markeringen zijn vergelijkbaar met <a> -links op de pagina, maar hebben een aantal speciale kenmerken:

1. Ze bevatten een :target-current -status voor wanneer de marker in beeld is of is vastgeklikt.
2. Navigatie via toetsenbord is inbegrepen en functioneert als een focusgroep .
3. Schermlezerfunctie is inbegrepen en de rapporten lijken op een tabblad.

Voeg markeringen toe aan zinvolle aandachtspunten in uw scroller met de volgende stappen:

1. Definieer de plaatsing van de scroll-marker-group als before of after .
2. Selecteer de aandachtspunten met een selector .carousel .point-of-interest::scroll-marker .
3. Geef content op met optionele, toegankelijke alternatieve alt-tekst : cijfers, tekst, leeg of een afbeelding.

De browser maakt alle markeringen aan en plaatst ze in de markergroepcontainer. In dit voorbeeld wordt voor elke <li> een lege marker gemaakt, zodat er voor elk item een ​​markerpunt ontstaat.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

Het element dat de markers bevat, heet ::scroll-marker-group en wordt aangemaakt als een sibling van de scroller, net als de scrollknoppen. Deze container kan naar wens worden gestyled en geplaatst.

Markeringen en knoppen tegelijk

Als je deze twee combineert, lijkt het op een draaimolen, maar dan met de volgende voordelen:

• Werkt met JavaScript uitgeschakeld.
• Geen hydratatie of lazy sizing (verminder CLS).
• Klaar voor alle soorten scrollanimaties en triggers.
• Toegankelijkheid is inbegrepen.
• Geschikt voor aanraking, muis en toetsenbord.

Doe minder, bereik meer, sneller.

Bronnen

In dit bericht worden deze functies meestal aangeduid als "carrousel", maar hun mogelijkheden en bruikbaarheid reiken veel verder dan alleen carrouselgebruik. Voor een volledig beeld van de mogelijkheden van deze nieuwe functies kunt u de Carrouselgalerij bekijken en andere componenten bekijken, zoals: scrollspy, tabbladen en dia's.

• Webstandaarden
  • CSS-overloop 5
  • Carrousel Uitleg
  • WAI Aria Carrousel
• Chroom
  • Intentie tot verzending
  • Carrouselgalerij
  • Carrouselconfigurator

Carrouselconfigurator

Voor visuele en interactieve leerlingen is de Carousel Configurator een goede optie.

Het biedt schakelaars, bijvoorbeeld voor scrollknoppen, en wanneer deze zijn ingeschakeld, verschijnen er direct knoppen in de carrousel, plus de bijbehorende CSS.

Het bevat ook voorbeelden van meer geavanceerde concepten die aan de carrousel grenzen:

• interactiviteit
• scroll-status
• scroll-gestuurde animatie
• en scroll snap kolommen

Carrouselgalerij

Een showcase voor iedereen die nieuwsgierig is naar hoe ver je met deze functies kunt gaan, met antwoorden op vragen zoals "kan het X?". Elke demo is gebaseerd op een use case die je op internet kunt vinden. Elke demo laat zien hoe je deze knoppen en markers kunt orkestreren met scroll-gestuurde animatie , scroll-state()- query's en nog veel meer.

Leuk weetje: de hele site maakt geen gebruik van JavaScript.

De voorbeelden variëren van heerlijk eenvoudig tot fantastisch robuust en boordevol functies. Het bekijken van de galerij moet inspirerend en geruststellend zijn, en natuurlijk ook leesbaar voor de code. Zoek en inspecteer @layer utilities voor hulpprogramma's die je kunnen helpen bij het maken van carrousels.

Verder werk

We zijn er trots op hoe goed deze functies integreren met alle HTML en CSS. De toegankelijkheid van een CSS-carrousel is uitstekend. De prestaties van een CSS-carrousel zijn beter dan die van welke JavaScript-oplossing dan ook. De gebruikerservaring van een CSS-carrousel is natuurlijk, vloeiend en rijk. Er zijn echter mogelijkheden voor verbetering.

Breng je eigen elementen mee

Er wordt al gewerkt aan het toevoegen van je eigen componenten voor scrollknoppen en markeringen. Dit betekent dat je je eigen <a> -tags kunt leveren met rijke content, zoals pictogrammen. Je kunt ook je eigen meerlaagse knoppen gebruiken, gebouwd met Tailwind .

Cyclisch scrollen

Veel draaimolens draaien zichzelf om als ze aan het einde zijn, zoals een draaimolen op een kermis. Dit staat op onze radar en we zijn van plan er een platformoplossing voor te bieden.

We hopen dat u deze functie leuk vindt. We kijken ernaar uit dat alle webgebruikers met "JavaScript uitgeschakeld" nu een prettige scrollervaring krijgen en profiteren van alle CLS-besparingen die de beter getimede levenscyclus van een ingebouwde carrousel met zich meebrengt.

Minder werk voor u, geweldige gebruikerservaringen en betere prestaties.