慣性スナップのスワイプページャー
4枚のカードを横スワイプでめくる。指の速さで次へ飛ぶか戻るかを決め、必ず1枚の位置にスナップする。ドットが連動し、PC ではドラッグと矢印ボタンで操作できる。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
デザインの要点
- スナップ判定は距離だけでなく速度も見る。短くても速いフリックで次へ進めると、指の意図どおりに動く
- 1枚ずつしか進ませない。速いフリックで2枚飛ぶと、どこまで進んだか分からなくなる
- ドットは現在地の表示であり操作の主役ではない。小さく置き、タップ標的は矢印ボタンで確保する
- 横ドラッグ中は縦スクロールを止めたいので track に touch-action: pan-y を指定し、横は自前で処理する
コード（コピーして使えます）
<div class="spd-wrap">
<div class="spd-viewport" id="spd-viewport">
<div class="spd-track" id="spd-track">
<article class="spd-card spd-c1"><p class="spd-kicker">今週のおすすめ</p><h3 class="spd-title">朝 5 分の片付け習慣</h3><p class="spd-text">机の上を撮って記録するだけ。3 週間続いた人は 82%。</p></article>
<article class="spd-card spd-c2"><p class="spd-kicker">新機能</p><h3 class="spd-title">家族と共有できるリスト</h3><p class="spd-text">買い物リストを一緒に編集。追加はその場で相手にも届きます。</p></article>
<article class="spd-card spd-c3"><p class="spd-kicker">ヒント</p><h3 class="spd-title">通知は 1 日 1 回にまとめる</h3><p class="spd-text">設定 › 通知 から「まとめて受け取る」を選べます。</p></article>
<article class="spd-card spd-c4"><p class="spd-kicker">読みもの</p><h3 class="spd-title">続けられる人の共通点</h3><p class="spd-text">目標を小さく、記録を目に見える場所に。1,284 人の記録から。</p></article>
</div>
</div>
<div class="spd-controls">
<button class="spd-arrow" type="button" id="spd-prev" aria-label="前のカード">‹</button>
<div class="spd-dots" id="spd-dots" role="tablist" aria-label="カードの位置"></div>
<button class="spd-arrow" type="button" id="spd-next" aria-label="次のカード">›</button>
</div>
</div>