3枚証言カルーセル
これは、お客様の声 3 枚を横スクロールで見せるカルーセルです。JavaScript を使わず、 display:flex と overflow-x:auto だけで横並び＋スワイプを実現しています。各カードは flex:0 0 280px で幅を固定し、縮まずに横へあふれる作りです。
このパーツの使いどころと実装ポイント
これは、お客様の声 3 枚を横スクロールで見せるカルーセルです。JavaScript を使わず、display:flex と overflow-x:auto だけで横並び＋スワイプを実現しています。各カードは flex:0 0 280px で幅を固定し、縮まずに横へあふれる作りです。スクロールバーは scrollbar-width:none と ::-webkit-scrollbar で非表示にし、すっきり見せています。
向いている場面
導入事例や利用者の感想を載せるサービスサイト、口コミを並べる EC、施術・施工の感想を見せる店舗サイトなどに向きます。縦に長くせず、限られた高さの中で複数の声を見せられるのが利点です。
カスタマイズと注意
- カード幅（
280px）を変えると一度に見える枚数が調整できます。少しはみ出させると「横に続く」と気づいてもらいやすいです - 顔写真や会社名を足すと信頼感が増します。実在しない人物の創作は避けてください
- スクロールバーを隠すと操作のヒントが減るため、左右に矢印やドットを足すと親切です
- マウスだけだと横スクロールしにくい環境があるので、必要なら JavaScript でドラッグ操作を補ってください
よくある質問
この横スクロールに JavaScript は必要ですか
基本表示には不要です。flex と overflow-x:auto だけで横スクロールとスワイプが動きます。ただし矢印ボタンでの送りや自動再生、マウスドラッグ操作を加えたい場合は JavaScript で補う必要があります。
スクロールバーを隠すと操作できないと気づかれませんか
その懸念はあります。バーを消すと横に続く要素があると分かりにくくなるため、カードを少しだけ画面端からはみ出して見せたり、左右の矢印やドットインジケーターを添えると、続きがあると伝わりやすくなります。