jQuery スライダープラグイン slick が簡単、便利。使い方をご紹介

今更ながらFlashアニメーションからの置き換えで、使いやすいスライダーはないかなぁ、と探していて見つけたのがこれ、slickというプラグイン。
jQueryのスライダーというとFlexSlider 2がわりと有名で、僕も使ったことがありますが、slickの方が簡単で分かりやすいと思います。レスポンシブにも対応しています。
今回はサムネイル付きのスライダーを設置してみたいと思います。

サンプルはこちら

目次 - Contents -

ダウンロードと設置

さて、まずはダウンロードです。slickのサイトへ行き、メニューの"get it now"をクリックするとダウンロードボタンまで移動します。Githubからもダウンロードできます。
ちなみにWordPress版も有料で利用できるようです。

ダウンロードすると、いろんなファイルが含まれていますが、今回使用するのは以下のファイル、フォルダです。

fontsフォルダ
ajax-loader.gif
slick.css
slick.min.js
slick-theme.css

それぞれ任意のフォルダに格納し、読み込みます。

このサンプルでは下記のように指定しています。

<link rel="stylesheet" type="text/css" href="./slick.css">
<link rel="stylesheet" type="text/css" href="./slick-theme.css">

<script type="text/javascript" src="./jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./slick.min.js"></script>

jqueryのバージョンは公式サイトのデモより新しいものを使いましたが、問題なく動きました。
下記のようにgoogleAPIから読み込むこともできます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

HTML

次はslickスライダーのHTMLです。公式サイトのデモはdivタグを使って画像を並べていたので、それに倣いますが、ulタグでもいいようです。

<div class="container">
<h1>jQueryスライダーslickサンプル</h1>
<h2>サムネイル付きスライダー</h2>
<div class="slider slider-for">
<div><img src="../../img/DSC00121.jpg" alt="ニューオーリンズ" /></div> <div><img src="../../img/DSC00231.jpg" alt="ニューオーリンズ" /></div> <div><img src="../../img/DSC00247.jpg" alt="ニューオーリンズ" /></div> <div><img src="../../img/DSC00348.jpg" alt="ニューオーリンズ" /></div> <div><mg src="../../img/DSC00360.jpg" alt="ニューオーリンズ" /></div> <div><img src="../../img/DSC00379.jpg" alt="ニューオーリンズ" /></div> <div class="slider slider-nav">
<div><img src="../../img/thumb_DSC00121.jpg" alt="ニューオーリンズ" /></div>
<div><img src="../../img/thumb_DSC00231.jpg" alt="ニューオーリンズ" /></div>
<div><img src="../../img/thumb_DSC00247.jpg" alt="ニューオーリンズ" /></div>
<div><img src="../../img/thumb_DSC00348.jpg" alt="ニューオーリンズ" /></div>
<div><img src="../../img/thumb_DSC00360.jpg" alt="ニューオーリンズ" /></div>
<div><img src="../../img/thumb_DSC00379.jpg" alt="ニューオーリンズ" /></div>
</div>
</div>

divのクラス名、slider、slider-for、slider-navは任意です。

プロパティの設定

次にjQueryでslickのプロパティを指定します。

<script type="text/javascript">
$(document).ready(function(){
$('.slider-for').slick({
autoplay: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
speed: 3000,
asNavFor: '.slider-nav',
waitForAnimate: false
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: false,
focusOnSelect: true,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 2
}
}]
});
});
</script>

プロパティの解説

slickのプロパティは多数あります。ここでは今回使用したプロパティを解説します。

autoplay: trueで、自動的に画像がスライドします。
autoplaySpeed: 画像が切り替わる時間を指定します。デフォルトは3000ms（ミリ秒）。
slidesToShow: スライドショーに表示する画像の数です。2とすれば2枚画像が表示されます。サムネイルは3としました。
slidesToScroll: 何枚ずつスライドするか指定します。通常は1枚ずつと思われます。
arrows: 画像の左右に、次へ、前への矢印を表示するかどうか指定します。
fade: 画像をスライドさせる際に、フェード効果を付けるかどうか指定します。
speed: fadeにかかる時間をミリ秒で指定します。
asNavFor: セットになるスライダーを相互に指定します。ここではslider-forとslider-navです。
waitForAnimate: アニメーションが終わるまでクリックなどのリクエストを受けつけないようにします。
dots: 画像に対応したドットを表示するかどうか指定します。サムネイル付きの場合はなくてもいいと思います。
centerMode: 1枚目の画像を真ん中に表示します。公式サイトでは、スライドする画像が奇数の場合に使用するようありますが、これは奇数だとスライダーの両端に、前後の画像が少しずつ表示されるからだと思われます。
focusOnSelect: クリックしたサムネイル画像をスライダーに表示するかどうか指定します。falseだと次へ、前へでしか移動できません。
responsive: レスポンシブサイトに対応させます。breakpointで、画面幅をピクセル指定します。ここで指定した幅より狭くなったらsettingsの中で指定したプロパティを適用します。CSSのメディアクエリでいうところのmax-widthです。ここでは画面幅が768px以下になるとサムネイルの数を3つに、画面幅が480px以下になるとサムネイルの数を2つに、減らすように指定します。

CSS

CSSは特に変更しなくても問題ないと思いますが、サムネイルの両端の次へ、前への矢印の色は、CSSで変更できます。背景色と似ているときは目立つ色に変更します。
slick-theme.cssの66行目から、

.slick-prev:before,
.slick-next:before
{
font-family: 'slick';
font-size: 20px;
line-height: 1;

opacity: .75;
color: white;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

サンプルではcolor: white;をcolor: black;
にしました。

jQuery スライダープラグイン slick が簡単、便利。使い方をご紹介

ダウンロードと設置

HTML

プロパティの設定

プロパティの解説

おすすめの設定

CSS

関連記事: