お客様の声 カルーセル
お客様の声 カルーセルは、複数の 推薦コメントを横スライドで切り替える パーツです。このサンプルは flex で並べたスライドを transform:translateX で横移動させ、 transition で滑らかに動かします。
このパーツの使いどころと実装ポイント
お客様の声 カルーセルは、複数の推薦コメントを横スライドで切り替えるパーツです。このサンプルはflexで並べたスライドをtransform:translateXで横移動させ、transitionで滑らかに動かします。自動再生に加え、下部のドットで手動切り替えもでき、各コメントはblockquoteで引用として意味付けされています。
向いている場面
制作会社や店舗、クリニックなど、導入実績や満足度を伝えたいページに向きます。声が複数あり、縦に長く並べたくないときにコンパクトにまとめられます。
カスタマイズと注意点
スライドはblockquoteを増減するだけで件数を変えられ、ドットはJavaScriptが自動生成します。掲載する声は必ず実在の許諾を得たものにし、社名や肩書きを伏せる場合も創作の証言は使わないでください。自動再生はマウスを乗せたら止まる、操作後は再開を遅らせるなどの配慮で見やすくなります。引用元はfooterとcite相当の情報で明確にし、誰の声かが伝わるようにします。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
お客様の声は何件まで載せられますか
件数に上限はありません。スライドのblockquoteを追加するだけで増やせ、ドットはJavaScriptが件数に合わせて自動生成します。ただし多すぎると最後まで読まれにくいため、代表的な3〜5件に絞るのが現実的です。
自動再生は止められますか
実装次第で止められます。サンプルはタイマーでの自動切り替えに加え、ドットでの手動操作に対応しています。マウスを乗せると一時停止する、手動操作後は自動送りを遅らせるといった調整を加えると親切です。