スライド式テスティモニアル
「スライド式テスティモニアル」は、左右の矢印ボタンで お客様の声を1件ずつ切り替えるスライダー です。各声はカードとして並び、 is-active が付いたものだけが display:block で表示され、他は隠れます。
このパーツの使いどころと実装ポイント
「スライド式テスティモニアル」は、左右の矢印ボタンでお客様の声を1件ずつ切り替えるスライダーです。各声はカードとして並び、is-active が付いたものだけが display:block で表示され、他は隠れます。JavaScript がカード数に応じてドット（ページ送り）を自動生成するので、声を増やしても操作部分は自動で追従します。
向いている場面
- コーポレートサイトやLPの導入実績・推薦コメント
- サービスの利用者レビューや満足の声
- クリニックやスクールの体験者コメント
声の本文と肩書きを差し替えるだけで使えます。1画面に1件だけを大きく見せるため、文章をじっくり読ませたい長めのコメントに向いています。矢印とドットのどちらでも移動でき、好みに合わせてどちらかを隠すこともできます。
実装上の注意
掲載する声は実在の許可済みコメントを使い、架空の証言を載せないことが信頼の前提です。矢印ボタンには aria-label が付いており、読み上げ環境でも「前へ」「次へ」が伝わります。表示の切り替えが display:none で行われるため、隠れているカードはキーボードのフォーカスが当たらない点も把握しておくと安全です。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
お客様の声を増やしたり減らしたりできますか
できます。声のカードを追加・削除するだけで、下部のページ送りのドットはカード数に合わせて自動で生成されます。矢印とドットの両方が新しい件数に対応するため、JavaScriptを書き換える必要はありません。
自動で切り替わるようにできますか
標準では矢印やドットを押したときだけ切り替わる手動式です。一定時間ごとに自動で次へ進めたい場合は、タイマーで切り替え処理を呼ぶJavaScriptを追加します。その際は操作中に自動送りが邪魔をしないよう一時停止の配慮があると親切です。