キャンプ、登山、旅、アウトドア、日本再発見

スカイファルコン

IT

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

更新日:

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

サンプルはこちら

ダウンロードと設置


さて、まずはダウンロードです。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つに、減らすように指定します。

おすすめの設定

メイン画像のスライダーでは、autoplay: true、waitForAnimate: falseは最低限指定しておいた方がいいです。waitForAnimateがtrueだと、アニメーション中はサムネイルをクリックしても反応しなくなります。

サムネイルでは、focusOnSelect: trueは必須です。trueでないとサムネイルをクリックしてもメイン画像が切り替わりません。サンプルではdots: trueにしましたが、サムネイルがあるので、これはfalseでもいいかもしれません。

レスポンシブサイトならresponsiveの指定はしておいた方がいいです。ちなみにこの指定がなくても、画像自体を伸縮させることはできます。しかしサムネイルの数なんかはこの指定を使って、画面幅が狭くなったら少なくした方がいいと思います。

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;
にしました。

-IT

Copyright© スカイファルコン , 2022 All Rights Reserved SkyFalcon.