JavaScript不要! HTMLとCSSでつくるカルーセルUI - ICS MEDIA

2025年4月にリリースされたChrome 135、Edge 135からHTMLとCSSのみでカルーセルUIがつくれるようになりました。新たに追加された::scroll-button()、::scroll-marker疑似要素を使用して、ボタンやインジケーターが実装可能です。 ▼HTML・CSSだけで実装したカルーセル カルーセルUIといえば、いちから自前で用意するのではなくSwiper.jsなどのJSライブラリを採用してきたコーダーも多いのではないでしょうか？ ICS MEDIAでもカルーセルUIを作成できるJSライブラリをまとめた記事があります。 『カルーセルUIを実現するJSライブラリまとめ - 導入手間や機能の比較紹介』 本記事では、新しいCSSでどのようなカルーセルが実現可能になるのか紹介します。 ご注意：本記事のデモは、Chrome 135・Edge 135以上で閲覧ください。

[ryabu363]

カルーセル麻紀さん、御存命なんですね。ビートたけしとセットで記憶にあるのはなぜなんだろう？

[diveintounlimit]

@functionも出てきたし、JavaScriptなしでできちゃうことが増えそうね。

[ttkazuma]

メリットないんだよなぁ

[Helfard]

ひょえーｶﾞｸｶﾞｸ。HTMLは一体何処を目指しているんだよ？

[yarumato]

“カルーセルUIといえば、Swiper.jsなどのJSライブラリを採用してきたコーダーも多いのでは？　Chrome 135からHTMLとCSSのみでカルーセルUIがつくれる。”

[riawiththesam]

自動で回転する仕様とjsのバックグラウンド動作が噛み合ってバグってること多いよね

[ssfu]

批判に弱いよね。

[kijtra]

これはコンポーネント化しやすそう。スライダーって作るのは面倒なわりにUIとしては使いにくいのに需要はあるんだよね。

[KoshianX]

まだ Firefox では使えないか