いろいろカスタマイズしたいなら画像スライダーはSlickがおすすめ

jQueryプラグインで様々な画像スライダー（作成者には本当に感謝です。。。）があると思いますが、その中でも僕が使っていて使いやすく簡単に導入できたSlickを紹介したいと思います。

基本的には、HTML、CSS、jQueryの基本的なスキルがあれば使用できるものですがなくてもなんとかなってしまいます。プラグインのいいところでもあり、悪いところでもありますね。

今回紹介するSlickはjQueryを書きますがシンプルでわかりやすく、かつカスタマイズもいろいろとしやすい優れもののプラグインです。

https://kenwheeler.github.io/slick/

インストール

・CDNの場合

CSS

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>

JS

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

※上記は最低限のファイルのためスライダーのボタンなどは自分でCSSを書いたりして調整する必要があります。

・ファイルをダウンロードし、サーバーに設置にする場合

https://github.com/kenwheeler/slick/

最低限必要なのはslick.min.jsとslick.cssになりますので、上記URLからダウンロードしたZIPフォルダを解凍し、slickフォルダの中からサーバーにアップロードしてください。その他スライダーのボタンなどのCSSを自分でカスタマイズするのが面倒な人はslick-theme.cssとfontsフォルダもアップロードしてください。
アップロード後は、jsとCSSを読み込むのを忘れないでください。

使い方

では今回の本題であるいろいろ設定ができる画像スライダーSlickを実際に使っていきたいと思います。例としてHTMLは下記のコードを前提に話を進めていきます。slick-sliderというくらすに囲まれた6つのdivです。各アイテムにclassを追加していますが別に必須とうわけではありません。

HTML

<div class="slick-slider">
	<div class="slick-item">
	</div>
	<div class="slick-item">
	</div>
	<div class="slick-item">
	</div>
	<div class="slick-item">
	</div>
	<div class="slick-item">
	</div>
	<div class="slick-item">
	</div>
</div>

上記のHTMLを例に説明していきます。

一番簡単な一枚表示のスライド

$('.slick-slider').slick();

上記のコードを記述するだけであらびっくりスライダーになっちゃいます。

一番簡単に使用する場合はこれだけでスライダー完成です。ものすごい簡単ですよね？
もしスライダーが動かないという方は、jQueryが先に読み込まれているか、該当ファイルが読み込まれているか、コンソール（ブラウザの開発者モードで確認できます）にエラーが出ていないかを確認してみてください。

3枚表示のスライド

$('.slick-slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

infinite : ループを無限にさせるかどうか
slidesToShow : スライドを一度に表示する枚数
slidesToScroll : スライドを一度にスクロールする数

無限ループで一度に3枚表示、一つ進むごとに1枚分スライドが移動するという指定になります。

レスポンシブ

$('.slick-slider').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

少し長くなりましたが上記がレスポンシブ対応のスライダーになります。

dots:　スライダー下部のドットを表示するかどうか
speed: スライダーの移動速度
resposibe : ブレイクポイントを指定し、幅ごとに設定を変更できます
breakpoint: 幅を指定
settings: この中にいじりたい設定を記述

と長いコードですが、1024px, 600px, 480pxごとに設定を変更しています。CSSのメディアクエリと考え方は変わりませんのでそれほど複雑ではないと思います。

アイテムの幅が可変のスライダー

先ほどまでは一定の幅のアイテムをスライドさせる方法でしたが今回は各アイテムの幅が可変の場合のスライダーです。これも少し行を追加するだけで簡単に作れてしまいます。優れものですね。

$('.slick-slider').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true
});

centerMode: アイテムを中心にします
variableWidth: これが幅がさまざなアイテムをスライダーにしてくれます。

アイテムの高さが可変のスライダー

今度は高さが可変のアイテムをスライダーにする場合です。

$('.slick-slider').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
});

adaptiveHeight: こちらで高さが可変のアイテムをスライダーにしています。

まとめ

今回ご紹介したSlickはいかがでしたか？僕個人的には簡単に実装・導入できるし、カスタマイズもいろいろとあるので画像スライダーを使用する際はSlickを使用していこうかなと思います。

上記で紹介した他にもいろいろと設定できる項目があるのでぜひ公式HPでご覧下さい。

ただ、プラグインばかり使用していると技術的にはあまり伸びないのでちゃんとスキルアップのための勉強も怠らないようにしたいですね。そのプラグインがどうやって動いているかくらいは理解できないと不測の事態に対応できないですしね。

では。