CSS-tools

Gratis CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool laden...

Wat is CSS Carousel Generator?

Een CSS-carrousel is een horizontaal of verticaal scrollbare container waarin items in positie klikken terwijl de gebruiker scrollt. Moderne CSS (Chrome 135+) voegt ingebouwde scrollknoppen en markers toe die werken zonder JavaScript, plus scroll-state queries voor het stylen van het huidige geklikte item anders dan andere. Dit is een native alternatief voor JavaScript-carrouselbibliotheken.

Snel antwoord

Bouw een native CSS-carrousel met scroll-snap, knoppen en markers - geen JavaScript nodig. Gebruik scroll-snap-type voor snapgedrag, ::scroll-button() voor pijlen, ::scroll-marker() voor stippen en scroll-state(snapped: true) queries voor actieve item styling. Chrome 135+ voor volledige functies; degradeert elegant elders.

Last updated: 2026-05-28

Beperkingen

Scrollknoppen (::scroll-button()) en markers (::scroll-marker()) vereisen Chrome 135+. Firefox en Safari ondersteunen ze nog niet. De carrousel valt terug naar een standaard scrollbare container.
CSS-carrousels kunnen niet automatisch voortgaan, oneindig lopen of dynamische itemtellingen verwerken zonder JavaScript. Gebruik voor geavanceerde carrouselfuncties een kleine JS-verbetering bovenop de CSS-basis.
Scroll-state queries (container-type: scroll-state) maken deel uit van dezelfde Chrome 135+ release. Cross-browser ondersteuning voor het stylen van actieve items vereist een JavaScript-fallback.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

Kies de lay-outrichting (horizontaal of verticaal) en itembreedte.
Stel snapgedrag en uitlijning in - verplicht klikt naar elk item, nabijheid klikt wanneer dichtbij.
Voeg optioneel scrollknoppen en markerstippen toe voor navigatie.
Kies toegankelijke lijstopmaak (ul/li) en het aantal items voor demo-uitvoer.
Kopieer de CSS en HTML naar uw pagina. Voeg echte inhoud toe aan elk carrousel-item.

Waarvoor je het kunt gebruiken

Bouw een productafbeeldingen carrousel zonder een JavaScript-bibliotheek toe te voegen.
Maak een kaartenlijst voor blogberichten of app-store-achtige vermeldingen.
Maak een toegankelijke afbeeldingengalerij met toetsenbordnavigeerbaar scroll en klikpunten.

Gebruik

Praktische voorbeelden

Voorbeeld

Productafbeeldingengalerij

Een e-commerce productpagina heeft een horizontale afbeeldingencarrousel nodig. Gebruik de tool met verplichte snap, startuitlijning en scrollmarkers. Bezoekers vegen of scrollen door productafbeeldingen met indicatorstippen die de positie tonen.

Voorbeeld

Blogberichten kaartenlijst

Een blog startpagina toont recente berichten in een horizontaal scrollbare kaartenlijst. Gebruik nabijheid-snap met scrollknoppen zodat bezoekers op pijlen kunnen klikken of vegen om recente artikelen te bekijken.

Veelgemaakte fouten

Verplichte snap gebruiken op zeer lange carrousels - gebruikers kunnen niet snel door meerdere items scrollen, wat traag aanvoelt.
Vergeten de scrollcontainer toetsenbordfocusbaar te maken - toetsenbordgebruikers hebben tabindex="0" nodig om met pijltjestoetsen te scrollen.
Vaste pixelbreedtes gebruiken zonder rekening te houden met mobiel - 300px items op een 320px scherm laten nauwelijks een glimp van het volgende item zien.

Verificatie

Test de carrousel met toetsenbordnavigatie: focus de container en gebruik pijltjestoetsen om door items te scrollen.
Controleer of klikpunten correct werken op aanraakapparaten - elke veegbeweging moet naar het dichtstbijzijnde item klikken.

FAQ

Vragen over CSS Carousel Generator

Welke browsers ondersteunen CSS-scrollknoppen en -markers?

Scrollknoppen (::scroll-button()) en markers (::scroll-marker()) vereisen Chrome 135+. Scroll-snap zelf wordt ondersteund in alle moderne browsers (Chrome 69+, Firefox 99+, Safari 11+). De carrousel degradeert elegant: browsers zonder knop-/markerondersteuning tonen een standaard scrollbare container met snapgedrag.

Heb ik JavaScript nodig voor een CSS-carrousel?

Voor basis scroll- en snapgedrag is geen JavaScript nodig. Scrollknoppen en markers werken declaratief in Chrome 135+. Voor functies zoals automatisch voortgaan, oneindige lus of dynamische itemtelling is nog steeds een kleine hoeveelheid JavaScript vereist. Deze tool genereert de no-JS basislijn.

Hoe style ik het actieve carrouselitem anders?

Gebruik de scroll-state() container query: @container scroll-state(snapped: true) { .item { opacity: 1; } }. Dit vereist container-type: scroll-state op de scrollcontainer. Gebruik voor browsers zonder scroll-state-ondersteuning een JavaScript scroll-event fallback of IntersectionObserver.

Gerelateerde tools

Meer css-tools

Css

Container Query Units Calculator

Bereken clamp()-waarden met container query units voor componentgebaseerde responsive sizing.

Open tool

Css

CSS Scroll-State Query Generator

Generate CSS scroll-state() container queries for styling snapped, stuck, or scrollable elements. Includes JavaScript fallback for cross-browser support.

Open tool

Css