https://zenn.dev/kandai/articles/carousels-with-css

Chrome135の新機能を使ってCSSだけで実装するカルーセルを試してみた

Chrome 135の新機能であるCSS Overflow Module Level 5を使用し、CSSだけでカルーセルを実装する方法を紹介しています。

::scroll-buttonと::scroll-marker擬似要素でボタンとマーカーを実装し、scroll-state()で選択されたスライドにスタイルを適用します。

JavaScriptなしでアクセシブルなカルーセルUIを実装でき、より高度なカスタマイズに今後の発展が期待されます。

Reply to this note

Please Login to reply.

Discussion

No replies yet.