CSS scroll-snapによるカルーセル（スライダー）ジェネレーター

CSS scroll-snapによるカルーセル（スライダー）ジェネレーター: 用途

写真やカードのカルーセルはECサイトでよく使われますが、スライダーのライブラリは重く、スマートフォンでスクロールが固まることもあります。

このジェネレーターは、CSSのscroll-snapを使い、ブラウザ標準のスクロールで各項目をぴたりと止めます。指でのスワイプはなめらかで、トラックパッドとキーボードにも対応し、JavaScriptはほとんどありません。パソコンとスマートフォンで一度に表示する数（1つと次の一部を見せて、スワイプできることを示す設定も含む）、間隔、角を選べます。自動回転はありません。読みやすさとアクセシビリティ（WCAG 2.2.2）を損なうためです。

使い方

1. 画像のアドレスを貼り付けます。
2. 一度に表示する数と間隔を選びます。
3. コードをコピーして、サイトに貼り付けます。

使うタイミング

• 商品のショーケース。
• 作品やポートフォリオの写真。
• お客様の声やサービスのカード。

よくある質問

なぜライブラリではなくscroll-snapなのですか？

scroll-snapはブラウザ標準のスクロールを使います。スマートフォンでのスワイプはInstagramのようになめらかで、トラックパッドとキーボードにも対応し、重さもありません。スライダーのライブラリは、同じことをするために数十KBのJavaScriptを追加しがちです。

カルーセルは自動で進みますか？

いいえ、意図的にそうしています。自動で回るカルーセルは読むのを妨げ、アクセシビリティの問題でもあります（WCAG 2.2.2は、5秒以上動くものを一時停止できることを求めています）。続きを見たい人は、スワイプするか矢印を使います。

テキストのカードでも使えますか？

はい。画像を、リストの各項目の中にある任意のコンテンツに置き換えてください。サイズとスナップはそのままです。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール