Slickとは、スライダーを作成するためのjQueryのプラグインです。
基本のSlickの使い方
1
公式サイトからslickをダウンロードします。
slick公式サイト(https://kenwheeler.github.io/slick)にアクセスし、メニュー一覧にある「get it now」をクリックします。
2
「Download Now」をクリックします。Zipファイルがダウンロードされ、パソコンのローカルフォルダに保存されるので、ダブルクリック(Windowsの場合は右クリック→すべて展開)で解凍します。
3
回答したフォルダを開き、「slick」というフォルダを探しデスクトップへ移動しておきます。
4
次にhtmlファイルを新規作成します。
<body>タグの間に下記のコードを記述します。
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
5
htmlファイルに「index.html」など任意の名前をつけて保存します。
6
新しいフォルダを作成し、任意のフォルダ名をつけます(ここでは「Slick」としています)。
デスクトップに保管しておいたslickフォルダと作成したhtmlファイルをこのフォルダ内に移動します。
7
slickフォルダに入っているcssファイルとjsファイルとhtmlファイルに読み込みます。
(1) </head>閉じタグの直前に下記を記述し、cssファイルを読み込みます。
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>(2) </body>閉じタグの直前に下記を記述し、jsファイルを読み込みます。
（※この時点でjQueryも読み込んでおきます）
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
8
jsファイルを新規作成して下記の記述をし、保存します。保存場所は手順5で作成したhtmlファイルと同じ階層にしておきます。
$(document).ready(function () {
$('.your-class').slick();
});
9
作成したjsファイルを、htmlファイルに読み込みます。
</body>閉じタグの手前に下記を記述します。
<script src="script.js"></script>
10
これでスライダーが実装されました。
htmlファイル内の「your content」の箇所に<img>タグを挿入し任意の画像を挿入すれば、画像のスライダーが完成します。
ここまでは、slick公式サイトの説明を日本語訳したものです。
公式サイトの説明(英語)はこちら：https://kenwheeler.github.io/slick#getting-started
応用：デザイン調整やオプション追加
11
お好みで、CSSで配置や色などの調整を行います。
記述例：
body{
background-color: #ddd;
}
/*スライダーの幅を調整し、真ん中寄せにする*/
.your-class {
width: 80%;
margin: 0 auto;
}
/* 矢印ボタンの色を変更する */
.slick-prev:before,
.slick-next:before {
color: #000;
}12
slickのオプションを使って、スライダーを自動再生させることができます。
手順8で作成したjsファイル内の.slick()の間に下記記述を足します。
{
autoplay: true
}
13
slickには他にもたくさんのオプションがあります。
下記はその一例です。検索エンジンで「jQuery slick オプション」などと検索すると、いろんな方がまとめてくれている記事を見つけることができます。
