お客様の声スライダー

このパーツの使いどころと実装ポイント

このパーツは、お客様の声を1枚ずつ横にスライドさせて見せる自動カルーセルです。複数のレビューカードを .tslider__track に横並びで入れ、JavaScriptで transform: translateX() の値を切り替えることでスライドします。下部にはドット型のインジケータが自動生成され、現在の位置がわかると同時に、ドットをクリックして任意のレビューへ直接移動できます。各カードは blockquote と cite を使った引用構造になっており、誰の声かが意味的にも正しく表現されます。

向いている場面

• 導入実績や満足度を訴求したいサービス・BtoBサイト
• 口コミが資産になる飲食・宿泊・教室系のページ
• LPの背中を押す「第三者の評価」エリア

限られた縦幅に複数の声を収められるため、情報量を抑えつつ説得力を出したい場面に向きます。

カスタマイズと注意

レビューを増やすには .tslider__slide を複製するだけで、ドットは自動で枚数分作られます。自動再生の速さは切り替えタイマーの間隔で調整できます。実装上の注意として、自動でスライドが動き続けると読み切れないことがあるため、マウスを乗せている間は一時停止する処理を入れると親切です。アクセシビリティでは、声が偽の証言にならないよう実在の許可を得たコメントを使い、ドットには操作対象がわかる aria-label を付けると安心です。スマホでは1枚が画面幅いっぱいになるので、カード内の余白を詰めすぎないようにしてください。

このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。