【初心者OK！】slickを使った高品質なスライダーの実装方法を解説します。

JavaScript Web制作

【コピペOK！】slickを使った高品質なスライダーの実装方法を解説します。

※当サイトはアフィリエイト広告を利用しています

なやむくん
初心者でも簡単に高品質なスライダ―機能を実装したい。
なやむさん
slickスライダーでカスタマイズの方法を知りたい

などの疑問や悩みを解決してまいります。

スライダ―を1から実装すると構造が複雑で、レスポンシブのことも考えるとけっこう実装が手間ですが、jQueryプラグインの『slick』を使うことで簡単に、そして高品質なスライダーを実装することができます。

しかし、jQueryプラグインを使ったことがないと、『実装難しいのでは？』というイメージを持たれている方もいるかと思います。

安心してください。slickの実装はとても簡単で初心者にもとっつきやすいjQueryプラグインなんです！

今回はslickを使ったスライダーの実装方法とカスタマイズについて解説します。

みつた
slickはスライダーを作成する上でかなり便利なプラグインですので、この記事でぜひ使い方をマスターしてほしいなと思います！

slickとは

slickは、jQueryを使用してスライダーを簡単に実装することができるプラグインです。

レスポンシブ対応はもちろん、多くのオプションや設定を提供しており、カスタマイズも豊富で見た目や動作を簡単に変更することもできてしまうという便利なプラグインで、多くの開発者が利用しています。

しかし、導入方法が分からないという方もいらっしゃるかと思いますので、次の章からさっそくslickの使い方に進みたいと思います。

slickを導入して、ダウンロードファイルを読み込む

それでは早速slickを導入して実際にスライダーを作成していきましょう。

よろこびくん
早くスライダー実装したいです！

slickの公式サイトにアクセス

まずはslickの公式サイトにアクセスします。

Slickの公式サイト

アクセスしたら上記のような画面になると思います。

slickファイルをダウンロードして使用する場合

『Download Now』をクリックし、ファイルをダウンロードします。

ヘッダーのグロナビにある『get it now』をクリックします。

するとダウンロードボタンのある個所までスクロールされますので、『Download Now』をクリックし、ファイルをダウンロードします。

ダウンロードファイルから使用するファイルを読み込む

ダウンロードが出来ましたら、ダウンロードしたファイルを読み込んでいきましょう。

ダウンロードしたファイルの内、slickを使用する上で必要不可欠なファイルは以下になります。

実装に必要なファイル

  • slick.min.js（スライダーの動きを実装するためのjsファイル）
  • slick.css（スライダーの最低限のレイアウトを整えるためのCSSファイル）

また上記とは別にjQueryを使用しますのでこちらも読み込む必要があります。

みつた
jQueryをダウンロードする場合はこちらから

これらのファイルをHTMLで読み込み、使用していきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>slickを学ぼう</title>
    <!-- slick専用CSS -->
    <link rel="stylesheet" type="text/css" href="/css/slick.css" />
    <!-- レイアウト用CSS -->
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
  </head>
  <body>
    <div class="container">
      <!-- ここからslickの内容 -->
      <!-- ここまで -->
    </div>
    <!-- jQueryの読み込みも忘れず -->
    <script type="text/javascript" src="/js/jquery-3.7.0.min.js"></script>
    <!-- slick専用jsファイル -->
    <script type="text/javascript" src="/js/slick.min.js"></script>
  </body>
</html>

このように読み込むことが出来ましたら、実際にslickを使用してスライダーを作成していきましょう。

よろこびくん
待ってました！

slickを使用してスライダーを実装する

それではさっそくslickを使用してスライダーを実装していきたいと思います。

まずは新しくjsファイルを用意して、「slickを使用するよ！」という宣言を記述します。

$(document).ready(function () {
  $(".slider").slick(); //スライダーを実装するタグのクラスまたはIDを指定する
});

今回はsliderクラスを指定していますが、ここは好きなクラスかIDを指定いただいてOKです。

次にHTMLファイルにスライダーコンテンツを記述していきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>slickを学ぼう</title>
    <!-- slick専用CSS -->
    <link rel="stylesheet" type="text/css" href="/css/slick.css" />
    <!-- 読み込み追加分のCSSファイル -->
    <link rel="stylesheet" type="text/css" href="/css/slick-theme.css" />
    <!-- レイアウト用CSS -->
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
  </head>
  <body>
    <div class="container">
      <!-- ここからslickの内容 -->
      <ul class="slider">
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide01.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide02.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide03.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide04.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide05.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide06.png" alt="" /></li>
      </ul>
      <!-- ここまで -->
    </div>
    <!-- jQueryの読み込み忘れず -->
    <script type="text/javascript" src="/js/jquery-3.7.0.min.js"></script>
    <!-- slick専用jsファイル -->
    <script type="text/javascript" src="/js/slick.min.js"></script>
    <!-- slick使用の宣言を記述 -->
    <script type="text/javascript" src="/js/script.js"></script>
  </body>
</html>

ちなみに今回style.cssは以下の記述にしています。

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #999; // 矢印を見やすくするため（矢印自体をCSSで編集してもOK）
}

.container {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  /* 表示確認のため中央寄せ */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

読み込むべきファイルをしっかり読み込んでいれば以下のように表示されるはずです。

上から順に「前に戻るボタン」「画像」「次に進むボタン」が表示されていればOKです。

しかし、「前に戻るボタン」「次に進むボタン」がデフォルト間強めのデザインで、画像挟んで上下にボタンがあるのも微妙です。

直接style.cssを編集してレイアウトを整えてもいいのですが、今回はslickをダウンロードしたファイルにslick-theme.cssがあるはずなのでこちらを読み込んでいきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>slickを学ぼう</title>
    <!-- slick専用CSS -->
    <link rel="stylesheet" type="text/css" href="/css/slick.css" />
    <!-- 読み込み追加分のCSSファイル -->
    <link rel="stylesheet" type="text/css" href="/css/slick-theme.css" />
    <!-- レイアウト用CSS -->
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
  </head>
  <body>
    <div class="container">
      <!-- ここからslickの内容 -->
      <ul class="slider">
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/1.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/2.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/3.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/4.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/5.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/6.png" alt="" /></li>
      </ul>
      <!-- ここまで -->
    </div>
    <!-- jQueryの読み込み忘れず -->
    <script type="text/javascript" src="/js/jquery-3.7.0.min.js"></script>
    <!-- slick専用jsファイル -->
    <script type="text/javascript" src="/js/slick.min.js"></script>
    <!-- slick使用の宣言を記述 -->
    <script type="text/javascript" src="/js/script.js"></script>
  </body>
</html>

すると「前に戻るボタン」「次に進むボタン」が矢印に変更されて位置も画像の左右になります。

よろこびくん
こっちのほうが何のボタンなのかもわかりやすいですね！

これでslickを使用して基本的なスライダーを実装することができました。

slickスライダーをカスタマイズする方法

slickスライダーはレイアウトや画像の切り替えの動きを簡単にカスタマイズできることが最大の強みと言っていいでしょう。

ここではslickスライダーのカスタマイズ方法について解説していきます。

みつた
カスタマイズを利用してかっこいいスライダーを実装してくださいね！

画像下にドットを追加する方法

スライダー画像下にドットを表示させることができます。

その場合は以下のように記述します。

$(document).ready(function () {
  $(".slider").slick({
    dots: true, // ドットを表示（falseで非表示）
  });
});
スライダーにドットを追加したサムネイル

dots: trueを追記することで画像下にドットを表示できます。

ドットが小さいのと左右の矢印を見やすくするために背景をグレーにしているため見づらいですが、表示されているのが分かるかと思います。

とはいえこのままでは小さく見づらいので、CSSで大きくしましょう。

ドットを大きくするために以下をstyle.cssに追記します。

.slick-dots li button:before {
  font-size: 26px;
}
スライダーのドットのサイズを調整したサムネイル
みつた
少し大きくなりましたね。ここはお好みで調整してください。

このようにドットを大きくしたり色を変えたりCSSで編集することもできます。

スライダー画像を複数枚表示する方法

これまでスライダー画像が表示されている枚数が1枚でしたが、当然複数枚表示にすることも可能です。

今回は3枚にしてみます。jsファイルに以下のように追記しましょう。

$(document).ready(function () {
  $(".slider").slick({
    dots: true,
    slidesToShow: 3, // 表示する枚数を指定
  });
});
スライダー画像を複数枚表示した画像

このようにslidesToShow: 表示したい数値を追記することで、その設定した枚数分表示することができます。

しかし、画像同士が密着していて窮屈なのでstyle.cssに以下を追記しましょう。

/* .sliderの箇所は自分で決めたクラス名でOK */
.slider li {
  padding: 0 10px;
  box-sizing: border-box;
}

このように画像同士に余白が生まれて窮屈さがなくなりました！

3枚ずつスライドさせる方法

これまでは1枚ずつでしかスライドさせることができませんでしたが、一気に複数枚スライドさせる方法です。

今回は3枚ずつスライドさせられるようにしていきます。

jsファイルに以下のslidesToScroll: スライドさせたい数値を追記します。

$(document).ready(function () {
  $(".slider").slick({
    dots: true,
    slidesToShow: 3,
    slidesToScroll: 3 // 一度に複数枚スライドさせる
  });
});

このように一気に3枚分スライドさせることができました。

自動でスライドさせる方法

これまでは手動でスライドさせていましたが、自動スライドを設定することもできます。

以下のコードを追記します。

$(document).ready(function () {
  $(".slider").slick({
    dots: true,
    slidesToShow: 3,
    slidesToScroll: 3,
    autoplay: true, // 自動でスライドさせる
    autoplaySpeed: 2000, // スライドさせる時間を設定
  });
});

autoplay: trueは自動でスライドさせたいかどうか設定することができ、trueで自動スライドさせてfalseで自動スライドさせないように設定ができます。

autoplaySpeed: 時間で自動でスライドさせる時間を設定することができます。

画像の切り替わり方をフェードにする方法

これまではスライドさせたときに左右にスライドして画像が切り替わる動きでしたが、この動きをフェードに変更することもできます。

その場合は以下のように追記します。

$(document).ready(function () {
  $(".slider").slick({
    dots: true,
    fade: true, // フェードに切り替える
    speed: 1000, // 切り替わるスピード時間設定
  });
});

このように画像の切り替わり方をフェードに設定することができます。

スライド画像を中心にし、左右の画像が見切れた状態にする方法

テキストだけでの説明では理解が難しいかと思いますのでどういうことか実際に見てみましょう。

このように、スライドが中央に配置され左右の端にある画像が見切れた状態で表示されるように設定することができます。

設定方法は以下です。

$(document).ready(function () {
  $(".slider").slick({
    dots: true,
    centerMode: true, // 画像の中央配置設定
    centerPadding: '60px', // 両端の見切れる幅を指定
    slidesToShow: 3,
  });
});

centerMode: trueとすることで、スライド画像を中央に配置できます。

centerPadding: '見切れる幅の数値'は、両端の画像の見切れる度合いを設定できます。

例えば100pxとしたら100px分見切れて表示されるように設定ができます。

スライダーを別のスライダーのナビゲーションに設定する方法

こちらもタイトルだけではイメージしづらいと思いますので、先にどのようなものか見ていただいてから解説に入ります。

このようにスライダーを2つ用意して、スライダーがもう1つのスライダーのナビゲーションとして連動して動いてくれる設定です。

それぞれ変更したファイルは以下の通りです。

    <div class="container">
      <!-- ここからslickの内容 -->
      <ul class="slider">
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide01.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide02.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide03.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide04.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide05.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide06.png" alt="" /></li>
      </ul>
      <!-- 追加したスライダー -->
      <ul class="slider_nav">
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide01.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide02.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide03.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide04.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide05.png" alt="" /></li>
        <li><img src="https://mitsutano-oshiro.com/wp-content/uploads/2024/03/slide06.png" alt="" /></li>
      </ul>
      <!-- ここまで -->
    </div>
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #999;
}

.container {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  /* 表示確認のため中央寄せ */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

/* slider_navクラスのCSSを追加 */
.slider_nav {
  margin-top: 20px;
}

.slider li,
.slider_nav li {
  padding: 0 10px;
  box-sizing: border-box;
}

.slider img,
.slider_nav img {
  width: 100%;
  max-width: 100%;
}

.slick-dots li button:before {
  font-size: 26px;
}
$(document).ready(function () {
  $(".slider").slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider_nav' // 連動させるもう一つのスライダーを指定
  });
  $('.slider_nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider', // 連動させるもう一つのスライダーを指定
    dots: true,
    centerMode: true,
    focusOnSelect: true // クリックしたスライド画像に移動
  });
});

連動させたいスライダーがある場合は、asNavFor: '.連動させたい要素'で結び付けます。

結びついたスライダーは連動して動いてくれる仕組みになります。

よろこびくん
このような複雑そうなスライダーもslickなら簡単に実装できてしまうのですね！

slickスライダーをレスポンシブに対応させる方法

いくら高品質なスライダーを実装できてもスマホ対応されていなければ意味がありません。

スライダーをレスポンシブ対応するのは少々面倒ではありますが、slickではレスポンシブにもしっかり対応してくれています。

レスポンシブ対応にするには以下のように記述します。

$(document).ready(function () {
  $(".slider").slick({
  dots: true,
  slidesToShow: 4,
  slidesToScroll: 4,
  // ここからレスポンシブの指定
  responsive: [
    {
      breakpoint: 1024, // ブレイクポイントの指定
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 768, // ブレイクポイントの指定
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480, // ブレイクポイントの指定
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
  });
});

まずレスポンシブ対応を行う場合は、responsive: []を記述し、この配列の中にレスポンシブの指定を記述します。

配列の中にはブレイクポイントの数だけオブジェクトを用意し、 settings: {}の中にブレイクポイントごとの指定を記述していきます。

今回はブレイクポイントを1024pxに設定し、画面幅が1024px未満の場合はスライドの表示枚数を3枚にします。

また768px未満でスライドを2枚、480px未満で1枚としています。

このようにslickでは簡単にレスポンシブ時の指定をすることができるで非常に便利です。

みつた
jQueryとはいえ、記述量も少なく直感的にわかりやすくていいですね！

まとめ

ここまで読んでいただきありがとうございました。

今回はjQueryプラグインの「slick」について解説させていただきました。

スライダーは1から作るのは面倒なので、slickを使用してスライダーを実装することも多いですが、初心者でも簡単にスライダーを実装できてしまうのとカスタマイズ性が高くとても便利なプラグインです。

また、今回説明しきれなかったカスタマイズ用オプションもありますのでぜひ、slickのサイトで調べてみてください。

ありがとうございました！

  • この記事を書いた人
  • 最新記事

みつた

完全未経験＆異業種から30歳の年でIT企業に転職。

フロント系が好き。
初心者の方にも理解してもらえるよう四苦八苦しながら発信しています。

-JavaScript, Web制作