jQueryのプラグインには様々なスライダープラグインがあります。
たくさんありすぎてどれがいいのかわからないですよね。。

なので今回は私がいつも使うプラグイン「slick.js（スリック）」の使い方やオプションカスタマイズを紹介します！

slick.jsとは？

「slick.js」とはスライダーを作成する為のプラグインです。

レスポンシブにも対応していてカスタマイズ性が高く、簡単に実装できるので初心者から上級者まで愛用しています。

どんなことができる？

「http://kenwheeler.github.io/slick/」
これが公式ページです。

大きな画像を一枚ずつスライドさせたり、複数の画像をスライドさせたりフェードイン＆フェードアウトさせたりできます。

詳しくは公式ページを下にスクロールしてください。

使い方

使い方は超絶簡単です。

プラグイン読み込み

まずはheadタグで必要なプラグインを読み込みます。

<!-- css 読み込み -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<!-- js 読み込み -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

jQueryを読み込んでいない場合は必ずslick.jsの記述より前で読み込みましょう。

今回はCDNで読み込んでいますが、ダウンロードして読み込みたい場合はこちらからダウンロードしてください。

HTMLの記述

<div class="slide">
    <img src="img/img1.jpg" />
    <img src="img/img2.jpg" />
    <img src="img/img3.jpg" />
</div>

親要素にクラスを与えます。

クラスを与えた要素の直下の子要素がスライドします。

javascript（jQuery）の記述

$('slide').slick();

先程与えたクラス名に対してslickを実行します。

たったこれだけでスライダーが完成します。

オプション

オプションについては以下の記事に詳しく載っています。

スライダープラグイン「Slick」便利なオプション&動きサンプル集