“お客様の声”や“導入事例”をスライダーで魅せる！Slick Sliderの使い方
※当サイトにはプロモーションが含まれています。
クライアント“お客様の導入事例”をスライダーで表示させて欲しい！
にゃテックおけまるだにゃ。
企業のホームページやLP（ランディングページ）などで、「お客様の声（導入事例）」を掲載しているのをよく見ます。
ただ、声の数や導入事例が多い場合は、１つずつ並べていくとページが縦に長くなってしまいます。
そういった時は、スライダー形式で横に流すように表示すると、見た目がスッキリします。
株式会社ABC 導入して本当に良かったです！ XYZ商事 親切な対応に感謝しています。 Tデザイン 制作も早くて助かりました！ Fクリエイティブ 安心して任せられました！ Nフリーランス 説明がわかりやすくて使いやすい！ Sコンサル 売上が目に見えてアップしました！ 株式会社みらい デザインも素敵で大満足です！ Startup X 直感的に使えてスムーズでした。 ※上記の会社はすべて架空のものです今回は、「Slick Slider（スリック・スライダー）」を使って、お客様の声（導入事例）のスライダーを作成してみました。
Slick Slider（スリック・スライダー）とは？Web制作でよく使われる軽量＆高機能なjQueryベースのカルーセル（スライダー）ライブラリです。
Slick Sliderを使ったスライダーの作成方法
ホームページのトップページやLP（ランディングページ）で、お客様の声や導入事例を表示する際に使えるHTML、CSS、JavaScriptのコードです。
今回は、これらをすべてまとめた完全なコードを用意しました。
コピーしてHTML形式で保存すれば、そのまま動作確認をすることができます。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>お客様の声（連続スライダー）</title> <!-- Slick CSS --> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> <style> body { font-family: sans-serif; padding: 30px; background: #f9f9f9; } h2 { text-align: center; margin-bottom: 30px; } .nya-customer-slider { width: 95%; margin: 0 auto; } .nya-voice-card { background: #fff; border: solid 1px #666; padding: 12px; text-align: center; margin: 0 6px; } .nya-voice-card img { width: 100%; height: auto; border-radius: 6px; margin-bottom: 10px; } .nya-voice-company { font-weight: bold; font-size: 0.95em; margin-bottom: 6px; color: #333; } .nya-voice-comment { font-size: 0.9em; line-height: 1.5; color: #555; } .nya-customer-slider .slick-track { display: flex; align-items: stretch; } .nya-customer-slider .slick-slide { transition: transform 0.5s; } @media (max-width: 768px) { .nya-voice-company { font-size: 0.9em; } .nya-voice-comment { font-size: 0.85em; } } </style> </head> <body> <h2>お客様の声</h2> <div class="nya-customer-slider"> <div class="nya-voice-card"> <img src="sample.jpg" alt="お客様の写真"> <div class="nya-voice-company">株式会社ABC</div> <div class="nya-voice-comment">導入して本当に良かったです！</div> </div> <div class="nya-voice-card"> <img src="sample.jpg" alt="お客様の写真"> <div class="nya-voice-company">XYZ商事</div> <div class="nya-voice-comment">親切な対応に感謝しています。</div> </div> <div class="nya-voice-card"> <img src="sample.jpg" alt="お客様の写真"> <div class="nya-voice-company">Tデザイン</div> <div class="nya-voice-comment">制作も早くて助かりました！</div> </div> <div class="nya-voice-card"> <img src="sample.jpg" alt="お客様の写真"> <div class="nya-voice-company">Fクリエイティブ</div> <div class="nya-voice-comment">安心して任せられました！</div> </div> <div class="nya-voice-card"> <img src="sample.jpg" alt="お客様の写真"> <div class="nya-voice-company">Nフリーランス</div> <div class="nya-voice-comment">説明がわかりやすくて使いやすい！</div> </div> <div class="nya-voice-card"> <img src="sample.jpg" alt="お客様の写真"> <div class="nya-voice-company">Sコンサル</div> <div class="nya-voice-comment">売上が目に見えてアップしました！</div> </div> <div class="nya-voice-card"> <img src="sample.jpg" alt="お客様の写真"> <div class="nya-voice-company">株式会社みらい</div> <div class="nya-voice-comment">デザインも素敵で大満足です！</div> </div> <div class="nya-voice-card"> <img src="sample.jpg" alt="お客様の写真"> <div class="nya-voice-company">Startup X</div> <div class="nya-voice-comment">直感的に使えてスムーズでした。</div> </div> </div> <!-- jQuery & Slick JS --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <script> jQuery(document).ready(function($){ $('.nya-customer-slider').slick({ autoplay: true, autoplaySpeed: 0, speed: 8000, cssEase: 'linear', arrows: false, dots: false, infinite: true, slidesToShow: 5, slidesToScroll: 1, pauseOnHover: false, pauseOnFocus: false, pauseOnDotsHover: false, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3 } }, { breakpoint: 768, settings: { slidesToShow: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1 } } ] }); }); </script> </body> </html>なお、ワードプレスに適用させる際は、jQueryがテーマに含まれている場合が多いので、下記の読み込みは不要になると思います。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> にゃテックただ、ワードプレスで適用させる場合は、CSSの調整が必要になるかも･･･です。
使用しているSlickオプション設定まとめ設定した、Slick Sliderのオプションについて簡単にまとめました。
オプション名 設定値 説明 autoplay true スライダーを自動再生する autoplaySpeed 0 スライド切り替えの待機時間をゼロにし、常に動き続ける連続スクロールを実現 speed 8000 1枚のスライドが動くのにかかる時間（8秒）。 cssEase ‘linear’ 動きを等速にする（自然な流れで連続スクロール） infinite true スライドをループさせる（最後まで行ったら最初に戻る） arrows false 左右のナビゲーション矢印を表示しない dots false ドットナビゲーション（ページ送り）を表示しない slidesToShow 5 一度に表示するスライド数（PCサイズで5件表示） slidesToScroll 1 スライドの移動数（1枚ずつ移動） pauseOnHover false ホバーしても自動再生を止めない pauseOnFocus false フォーカス（クリックなど）しても止まらない pauseOnDotsHover false ドットにホバーしても自動再生を止めない（今回はdots: falseなので無効）詳細はドキュメントをご確認ください。
参考：【GitHub】Slick Slider
responsive オプションについて画面幅に応じて表示数を変える「レスポンシブ対応」の設定です。
ブレークポイント slidesToShow slidesToScroll 説明 1024px 以下 3 1 タブレットサイズで3枚表示 768px 以下 2 2 スマホ横画面で2枚表示、2枚ずつ移動 480px 以下 1 1 （デフォルト） スマホ縦画面で1枚ずつ表示ちょっと説明が簡素になってしまいましたが以上です。
にゃテック動きのない“お客様の声”のデザインは下記の記事にまとめました。
「お客様の声」や「商品の感想」などに使えるCSSデザインの実例https://best-item.work/css/service-review/ホームページやランディングページ（LP）、セールスページ（SP）で訪問者の信頼を得るために欠かせないのが、「お客様の声」や「商品の感想」といったリアルなフィードバックです。 今回は、こうした「お客様の声」や「商品の感想」 …こんな記事も読まれています
BOT