“お客様の声”や“導入事例”をスライダーで魅せる！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枚ずつ表示

ちょっと説明が簡素になってしまいましたが以上です。