• このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

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

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

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

slickのデモはこちらから

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>

終わりに

実際にデモページで右クリックして「ページのソースを表示」からソースを御覧ください。ソース量の少なさと実装のしやすさを実感されるかと思います。slickのバリエーションも豊富にありますので、色々と試してみてください。