Carrousels met CSS

Adam Argyle

Gepubliceerd: 20 maart 2025

Vanaf Chrome 135 kun je functies uit de CSS Overflow 5-specificatie gebruiken die zijn ontworpen om scroll- en carrouselervaringen te creëren.

Dit bericht is een overzicht van veel verschillende scroll- en carrouselervaringen gemaakt met deze nieuwe functies, en zonder JavaScript. Bekijk de volgende video en word enthousiast over wat er nu kan worden bereikt.

In de video wordt een harmonie van scrollknoppen, scrollmarkeringen, scrollgestuurde animatie, scroll-state() queries, :has(), grid, anker en nog veel meer getoond.

Nog indrukwekkender is het toegankelijkheidsverhaal.

De best practices voor carrousel worden afgehandeld door de browser, dankzij de samenwerking tussen de engineering- en toegankelijkheidsteams. Het zou heel moeilijk zijn om een ​​toegankelijker carrousel te maken dan dit.

De elementen van een carrousel worden weergegeven als een toegankelijkheidsboomweergave, waarbij de knoppen en tabbladelementen duidelijk worden aangegeven om een ​​voorbeeld te geven van wat een schermlezer in de carrousel zal zien.
Schermafbeelding van de toegankelijkheidsstructuur van de Chrome DevTools-carrousel: demo

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

Een carrousel is een scrollgebied met maximaal twee extra UI-mogelijkheden: knoppen en markeringen.

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

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

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

De rest van dit bericht laat zien hoe je een carrousel kunt opbouwen met behulp van deze nieuwe functies.

Begin met een scroller

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

De volgende CSS creëert een basisscrollgebied voor gebruik in latere stappen 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;
  }
}
Een scrollgebied dat wordt weergegeven zonder andere voordelen of aanwijzingen dan dat de inhoud wordt afgesneden.

Voeg schuifknoppen toe met ::scroll-button()

Afhankelijk van uw besturingssysteem zijn er mogelijk al schuifknoppen rond uw schuifbalken aanwezig. Ingebouwde schuifbalkknoppen hebben de neiging een scrollgebied te verschuiven, terwijl CSS-scrollknoppen 85% van het scrollgebied bestrijken.

Voor carrousels die slechts één item over de volledige breedte tegelijk weergeven met scroll-klikpunten , voelt dit aan als een item per item-hoeveelheid. Voor lange lijsten met items waarvan er meer dan één tegelijk zichtbaar zijn, scrollt deze bijna een volledige pagina.

Om schuifknoppen 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 alternatieve tekst .

De browser maakt echte knoppen, met uw inhoud erin, als broers en zussen van de scroller. U bent nu vrij om deze knoppen in te delen, te stylen of anchor() zoals u dat wilt. Deze volgende CSS maakt er twee, één voor een knop naar links scrollen en één voor een knop naar rechts scrollen.

.carousel {
  …

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

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

Voeg schuifmarkeringen toe met ::scroll-marker()

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

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

Er wordt een horizontale lijst met tv-afleveringen weergegeven, beginnend bij seizoen 2, aflevering 1. Er staan ​​twee lijsttitels hierboven, seizoen 1 en seizoen 2, elk met pijlen die ernaar wijzen om aan te geven dat dit de gegenereerde schuifmarkeringen zijn.

Merk op dat deze markeringen geen stippen zijn, maar dat ze de content: "Season 1" eigenschap van hun pseudo-element. Markeringen kunnen ook miniaturen zijn, die vaak worden gebruikt voor galerijcarrousels in e-commerce of fotogerichte websites.

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

  1. Ze bevatten een :target-current status voor wanneer de markering in beeld is of wordt vastgeklikt.
  2. Toetsenbordnavigatie is inbegrepen en gedraagt ​​zich als een focusgroep .
  3. Schermlezerervaring is inbegrepen en rapporteert als een tablijst.

Voeg markeringen toe aan betekenisvolle interessante plaatsen in uw scroller met de volgende stappen:

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

De browser maakt alle markeringen en plaatst deze in de markergroepcontainer. In dit voorbeeld wordt voor elke <li> een lege markering gemaakt, zodat voor elk item een ​​markeringspunt ontstaat.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}
Demo

Het bevattende element van de markeringen wordt een ::scroll-marker-group genoemd en is gemaakt als een broer of zus van de scroller, net als de scrollknoppen. Deze container kan worden gestyled en geplaatst waar u maar wilt.

Markeringen en knoppen tegelijk

Voeg de twee samen en de ervaring ziet eruit als een carrousel, maar heeft de volgende voordelen:

  • Werkt met JavaScript uitgeschakeld.
  • Geen hydratatie of luie maatvoering (verminder CLS).
  • Klaar voor allerlei soorten scrollanimaties en triggers.
  • Toegankelijkheid is inbegrepen.
  • Aanraak-, muis- en toetsenbordvriendelijk.

Doe minder, bereik meer, sneller.

Demo

Bronnen

Dit bericht verwijst meestal naar deze functies als 'carrousel', maar hun mogelijkheden en bruikbaarheid reiken veel verder dan gebruiksscenario's voor carrousels. Voor een volledig beeld van het potentieel van deze nieuwe functies, probeer de Carousel Gallery en bekijk andere componenten zoals: scrollspy, tabbladen en dia's.

Voor visuele en interactieve leerlingen kunt u de Carrouselconfigurator proberen.

Het biedt schakelaars, bijvoorbeeld scrollknoppen, en wanneer ingeschakeld verschijnen er in de weergegeven carrousel onmiddellijk knoppen plus de bijbehorende gebruikte CSS.

Een screenshot van de configuratorwebsite die een HTML-codefragment van een eenvoudige lijst toont. Onder de HTML bevinden zich 4 schakelaars: scrollknoppen, puntnavigatie, automatische pagina's en inert. Onder de schakelaars bevindt zich een lijst met kaarten, klaar om een ​​van de schakelaaraanbiedingen toe te voegen.
https://chrome.dev/carousel-configurator/

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

Een showcaseruimte voor diegenen die nieuwsgierig zijn naar hoe ver je met deze functies kunt gaan, door vragen te beantwoorden als "kan het X?". Elke demo is gebaseerd op een gebruiksscenario dat op internet te vinden is. Elke demo laat zien hoe u deze knoppen en markeringen kunt orkestreren met scrollgestuurde animaties , scroll-state()- query's en nog veel meer.

Leuk weetje: de hele site is JavaScriptloos.

Een screenshot van de landingspagina voor de carrouselgalerij. Heeft een welkomstkop, wat informatie over de site en een lijst met carrouselvoorbeelden als links.
https://chrome.dev/carousel/

De voorbeelden variëren van heerlijk eenvoudig tot fantastisch robuust en rijk aan functies. Bladeren door de galerij moet inspirerend en geruststellend zijn en uiteraard inspecteerbaar zijn op code. Zoek en inspecteer @layer utilities voor hulpprogramma's die u 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 van topklasse. De prestaties van een CSS-carrousel zijn beter dan welke JavaScript-oplossing dan ook. De gebruikerservaring van een CSS-carrousel is natuurlijk, soepel en rijk. Er zijn echter manieren om te verbeteren.

Breng je eigen elementen mee

Er wordt al gewerkt aan de mogelijkheid om uw eigen componenten voor schuifknoppen en markeringen toe te voegen. Dit betekent dat u uw eigen <a> -tags kunt leveren met rijke inhoud, zoals pictogrammen. Je kunt ook je eigen meerlaagse knoppen meenemen die zijn gebouwd met Tailwind .

Cyclisch scrollen

Veel carrousels wikkelen zich om zichzelf heen als ze het einde bereiken, zoals een carrouselrit op een kermis dat kan doen. Dit staat op onze radar en we zijn van plan er een platformoplossing voor te bieden.

We hopen dat je deze functie leuk vindt. We kijken uit naar alle "JavaScript uitgeschakeld" webgebruikers die nu een leuke scrollbare ervaring zullen krijgen en naar alle CLS-reducties die kunnen worden behaald door de beter getimede levenscyclus van een ingebouwde carrousel.

U hoeft minder te doen, geweldige gebruikerservaringen, betere prestaties.