【レスポンシブ対応】高機能なスライダーが作成できる「slick」

今回はslickというスライダー実装のためのjQueryプラグインをご紹介します。

サイト制作の現場ではスライダー（カルーセル）の実装といえばbxsliderがまっさきに思い浮かぶと思います。導入事例も多く様々なバリエーションで展開されているので、気軽に導入できるので人気です。

しかしより高機能で簡単に実装できる、「slick」というプラグインがありましたので、今回は特徴や実装方法についてご紹介します。

slickのデモはこちらから

1. slickの特徴
2. slick実装に必要なファイル
3. 【HTML】head内の記述
4. 【HTML】body内の記述
5. 終わりに

slickの特徴

slickは大きく次のような特徴をそなえています。

レスポンシブ対応
ブレークポイントごとにスライダーのレイアウトや設定を変えられる
CSS3対応
スワイプ・マウスドラッグでのスライド操作可能
矢印ボタンクリックでのスライド操作可能
自動再生・フェードなど多様な見せ方が可能

slick実装に必要なファイル

公式サイトのget it nowのよりダウンロード可能です。ファイルが色々とありますが、動かすのに必要なのはjQueryソースコード、slick用のcss（2つ）とJavascript、矢印ボタンなどフォントが入ったfontsフォルダとなります。

jquery.js
slick.css
slick-theme.css
slick.js
fonts(フォルダ)

今回は楽に記述するためスライダー画像を記述するHTMLのヘッダ内で上記4つのソースをCDNで読込み、fontsフォルダをHTMLと同階層に配置しての実装方法を紹介します。※fontsフォルダ内のファイルはslick-theme.css上で読み込まれます。

【HTML】head内の記述

head内ではCDNでslick.css/slick-theme.css/jquery-2.2.0.min.js/slick.min.jsの4つを読込みます。CDN記述の順番を間違えると正常に動作しないのでご注意ください。styleタグ内では、デモ用にスタイルを調整しています。

<head>
  <title>Slick Demo</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
    }
  </style>
</head>
</head>

【HTML】body内の記述

body内ではスライダーのコンテンツ（画像）と、スライダーのレイアウトおよび動作設定のためのJSを記述していきます。

<!--スライダーのコンテンツ（画像）を記述-->
  <section class="regular slider">
    <div>
      <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3">
    </div>
  </section>

<!--スライダーのレイアウト・動作設定を記述-->
  <script type="text/javascript">
    $(document).on('ready', function() {
      $(".regular").slick({
        dots: true,
        autoplay: true,//自動再生あり
        autoplaySpeed: 2000,//自動再生でのスライダー切替スピード2000ms(2秒)
      });
    });
  </script>