CSS Carousel Generatorとは
A CSS carousel is a horizontally or vertically scrollable container where items snap into position as the user scrolls. Modern CSS (Chrome 135+) adds built-in scroll buttons and markers that work without JavaScript, plus scroll-state queries for styling the currently snapped item differently from others. This is a native alternative to JavaScript carousel libraries.
クイックアンサー
Build a native CSS carousel with scroll-snap, buttons, and markers — no JavaScript needed. Use scroll-snap-type for snap behavior, ::scroll-button() for arrows, ::scroll-marker() for dots, and scroll-state(snapped: true) queries for active item styling. Chrome 135+ for full features; degrades gracefully elsewhere.
制限事項
- Scroll buttons (::scroll-button()) and markers (::scroll-marker()) require Chrome 135+. Firefox and Safari do not yet support them. The carousel falls back to a standard scrollable container.
- CSS carousels cannot auto-advance, loop infinitely, or handle dynamic item counts without JavaScript. For advanced carousel features, use a small JS enhancement on top of the CSS foundation.
- Scroll-state queries (container-type: scroll-state) are part of the same Chrome 135+ release. Cross-browser support for styling active items requires a JavaScript fallback.
使い方
- Choose the layout direction (horizontal or vertical) and item width.
- Set snap behavior and alignment — mandatory snaps to every item, proximity snaps when near.
- Optionally include scroll buttons and marker dots for navigation.
- Choose accessible list markup (ul/li) and the number of items for demo output.
- Copy the CSS and HTML into your page. Add real content to each carousel item.
主な用途
- Build a product image carousel without adding a JavaScript library.
- Create a card rail for blog posts or app store-style listings.
- Make an accessible image gallery with keyboard-navigable scroll and snap points.