お客様の声スライダー（自動再生）
お客様の声スライダーは、複数の推薦コメントを 1 枚ずつ自動で入れ替えて見せるテスティモニアル UI です。各 .ts-sl__item を position:absolute で重ね、 opacity の transition でふわりとフェード切替します。
解説
お客様の声スライダーは、複数の推薦コメントを 1 枚ずつ自動で入れ替えて見せるテスティモニアル UI です。各 .ts-sl__item を position:absolute で重ね、opacity の transition でふわりとフェード切替します。表示中のスライドにだけ is-on クラスが付き、setInterval が約 4.5 秒ごとに次へ進めます。引用符は ::before の擬似要素で描いているため、文字データを汚さずに装飾できる点が実装の要点です。
使いどころ
- コーポレートサイトの導入実績や信頼感を伝えるセクション
- サービス LP の申込ボタン直前に置く後押し要素
- 採用サイトで社員インタビューを循環表示する場面
切替速度は setInterval の数値で調整でき、ゆっくり読ませたいなら 6000 前後に伸ばします。読み手が文章を追っている最中に自動で送られると不親切なので、ホバー中は clearInterval で一時停止させると親切です。prefers-reduced-motion を尊重し、動きを抑える設定の利用者には自動再生を止める配慮も加えると、アクセシビリティが向上します。
よくある質問
自動再生の速度はどう変えますか。
JS 末尾の setInterval に渡している 4500 という数値がミリ秒単位の切替間隔です。ゆっくり読ませたいなら 6000、テンポよく見せたいなら 3000 のように書き換えてください。
ドットをクリックして手動で切り替えられますか。
はい。各ドットの click で対応スライドへ飛ぶ処理が組まれているため、自動再生と併用できます。読みたいコメントを利用者が選べるので回遊性が上がります。