JS 【slick.js】の使い方

2020-06-29

jQueryベースのスライダー系のプラグインとして、重宝している「slick」の使い方メモをしていきたいと思います。

まず、下記サイトから必要なファイルをダウンロードします。
http://kenwheeler.github.io/slick/
ダウンロードしなくても、CDNへのリンクを記述も可能だそうです。
JSファイルについては、
・ slick.js
・ slick.min.js
とありますが、min となっている方が、軽量化されているので、こちらを使用すると良いでしょう。

使い方

シンプルな構成にしていますが、スライドさせたいブロック毎にまとめて、大枠の id / class に対して、slickのスクリプトを記述するといった形になります。

これだけで、シンプルなスライドショーになります。

オプションなどを応用することによって、スライドショーを色々とカスタマイズすることができるので、下記に記載していきます。

オプションを記載していく際には、（）の中に、{}を入れて、オプションをそれぞれ記載していきます。
内容もかなり豊富ですが、個人的によく使用しているオプションをまとめていきたいと思います。

オプション名 オプション説明
デフォルト値		 オプション記述例・備考
adaptiveHeight スライドの高さの自動調整の有効化 [default:false]
autoplay 自動再生の有効化 [default:false]
autoplaySpeed 自動再生のスピード
（ミリ秒単位）		 [default:3000]
arrows 前/次の矢印の生成の有効化 [default:true]
asNavFor スライダを他のスライダのナビゲーションに設定する
（クラス名またはID名）		 [default:null]
prevArrow 「前へ」ナビのHTMLをカスタマイズ
[default: <button type=”button” class=”slick-prev”>Previous</button>]
prevArrow: ‘<div class=”prev”>PREV</div>’
（arrowsオプションがtrueの場合のみ）
nextArrow 「次へ」ナビのHTMLをカスタマイズ
[default: <button type=”button” class=”slick-next”>Next</button>]
nextArrow: ‘<div class=”next”>NEXT</div>’
（arrowsオプションがtrueの場合のみ）
centerMode slidesToShowが奇数の時、現在のスライドを中央に表示するか [default:false]
カレントスライドを中央に配置するとともに、表示外のスライドが少しだけ見切れるようになる
centerPadding centerMode:trueの時、左右のスライドを見せる幅
(px or %)		 [default:50px]
centerPadding:’10%’
（シングルクォーテーションで囲う）
cssEase CSS3 Animation
イージングの指定		 [default:ease]
cssEase: ‘ease-in’
（ease-in,ease-in-out,linearなど）
dots ドットナビを表示する [default:false]
dotsClass ドットナビのクラス名の変更 [default:’slick-dots’]
dotsClass: ‘my-dots’,
draggable マウスドラッグで
スライド切替えの有効化		 [default:true]
fade スライド切替えを
フェードにする		 [default:false]
slidesToShowオプションを2以上にする場合は、fadeをfalseにしないと動かない
infinite スライドの
無限ループの有効化		 [default:true]
edgeFriction infinite:false時のカルーセルの両端をスワイプしたときのバウンドする値 [default:0.15]
initialSlide 最初のスライドを指定 [default:0]
0から始まる数字で指定
responsive レスポンシブのブレイクポイントを設定してオプションを切り替える（下記にて例を記載） [default:none]
指定された画面幅のみで有効となるオプションを設定
カンマ区切りで複数指定可能
slidesToShow 表示するスライド数 [default:1]
2以上にする場合は、fadeオプションをfalseにする必要がある
slidesToScroll １スクロールで動くスライド数 [default:1]
speed スライド/フェードアニメーションの速度 [default:300]
touchMove タッチでスライドさせる [default:true]
variableWidth 可変幅スライド [default:false]
vertical 縦方向にスライドを有効化 [default:false]
verticalSwiping 縦方向のスワイプを有効化 [default:false]
zIndex z-indexの値 [default:1000]

その他、詳しい内容はslickの配布サイトにも記載があります。

使用例

オプションを活用すれば、色々な見せ方ができますが、これまでに割と活用したかなという内容を記載しておきたいと思います。

・ スライドを無限ループかつ常に動き続けた状態に

speedは、サイトの雰囲気などに合わせて、調整してください。
また、slidesToShow で表示させるスライドの数もスライドの全体の数に合わせて調整する必要があります。

・ ブレイクポイントを設ける

このように、することでウィンドウ幅３点のブレイクポイントでスライドショーで表示させる数が切り替えることができます。