JavaScriptは1行もありません。横にスワイプするか、スクロールバーを動かしてください。指を離すと必ずカードの左端に吸い付きます。

• スナップは指定するだけ

  位置の計算も慣性の再現も要りません。ブラウザのスクロールをそのまま使います。

• 縮まないようにする

  flex: 0 0 auto を忘れると全部が1画面に詰め込まれ、スクロールが生まれません。

• スクロールバーは消さない

  消すと動かせることが伝わりません。細くして目立たせないだけにします。

• 端の余白は2つ書く

  padding だけだと最後の1枚が端まで行けません。scroll-padding も同じ値にします。

• 1枚ずつ送る

  scroll-snap-stop: always を付けると、勢いよく振っても飛ばされません。

この形の弱点は、2枚目以降がほとんど見られないことです。いちばん伝えたい内容は必ず1枚目に置いてください。