slick.jsのカスタマイズなどを知りたい人はこちら

私がweb制作を始めた当初からトップページなどでスライダーを使用することがよくありました。
制作初めたころはどのスライダープラグインが使い勝手がいいか分からず、いろいろなものを試していました。ですので、その度にプラグインの使い方を調べて、時間がかかっていました。

しかし今ではほとんどslick.jsのみを使用しています。ほとんどのケースはslick.jsで対応できるので、本当に重宝しています。
slick.jsの特徴としては以下のものです。

  1. レスポンシブ対応
  2. ブレークポイントを設定でき、ブレークポイントでスライダーの設定を変更できる
  3. サムネイル付きのスライダーを作成できる
  4. オプションが豊富で多くのケースに対応できる
  5. MITライセンス

slick.jsの使い方

次に「slick.js」の使い方を紹介していきます。


ファイルの準備

最初にファイルのを下記のサイトの「Dowmload Now」からデータをダウンロードします。
(この記事を書いているときのslickのバージョンは1.8.0です。)

slick配布元

ダウンロードして解凍したフォルダの中にはいろいろ入っていますが、実際に使用する際に最低限必要なものは以下のものです。

  • /slick/slick.min.js
  • /slick/slick-theme.css
  • /slick/slick.css
  • /slick/ajax-loader.gif
  • /slick/fonts/以下

使用する際にはjsとcssは別ファルダにしても問題ないのですが、
css、ajax-loader.gif、/fonts/の階層構造は変更させないほうがいいので、これらは同じファルダ内に設置してください。


使用方法

jQueryプラグインなので、jQueryと一緒に読み込んでください。
※ファイルパスは適宜変更してください。








以下のDemo1はslickの最低限の設定をしたものです。
cssは見た目をそろえるために設定しているだけで、実際は「Demo1のjsカ所」が重要です。

Demo1

See the Pen slick-demo1 by blanks (@blanks-site) on CodePen.

Demo1のjsカ所


$(function(){
  $("#slider").slick();
});

これだけでスライダーが実装できるなんて、最初の頃は本当に驚きました。ほんと、プラグインを制作してくださる方には感謝しかないです。


次にスライドを複数表示してみます。またレスポンシブ対応させて表示画面が狭くなると、スライドの枚数が変わるようにも設定してみます。
※CODEPENの「JS」ボタンを押せば、jsのコードが隠れて「Result」の表示範囲が広くなるので、スライドの枚数が変わります。

Demo2

See the Pen slick-demo2 by blanks (@blanks-site) on CodePen.


やっぱりスライダーには自動で動いてくれないと困ります。もちろんslick.jsにも自動スライドのオプションはあります。
またそれ以外のオプションもここでいくつか説明していきたいと思います。

Demo3

See the Pen slick-demo3 by blanks (@blanks-site) on CodePen.

「autoplay」は自動スライドさせるかどうかのオプションです。
「autoplaySpeed」で自動スライドを設定した場合のスライドが止まっている時間を設定できます。
「speed」で次のスライドに切り替わるまでの時間を設定できます。
「dots」をtrueにすれば、スライドの下にドットナビゲーションが表示されます。
「fade」をtrueにすれば、フェードインフェードアウトでスライドが切り替わります。

その他オプションなどをまとめてみました。
※間違っていた場合はご指摘ください。



slcik.js設定一覧

slickの配布元の英語を参考に記載しています。
初期値:「$(element)」の$(element)は下記で言うところの「$("#slider")」です。


$(function(){
   $("#slider").slick();
 });


オプション一覧

accessibility

初期値: true

キーボードのtabキーと矢印キーでのスライドの切り替えを有効にする

adaptiveHeight

初期値: false

スライドの要素の高さが違う場合にスライドの高さをそろえる

autoplay

初期値: false

スライドの自動切り替え

autoplaySpeed

初期値: 3000

autoplayをtrueにした場合のスライドが止まっている時間

少し応用

arrows

初期値: true

前のスライド、次のスライドへの矢印ナビゲーションを表示する

asNavFor

初期値: null

スライド要素を2つ設置したときに、同期してスライドさせたいスライダーを設定する

詳しい使い方はこちら

appendArrows

初期値: $(element)

矢印ナビゲーションが設置される要素

arrowsのナビゲーションはpostion:absoluteが適用されているので、position:relativeを適用する要素を変更したいときに使用します

appendDots

初期値: $(element)

ドットナビゲーションが設置される要素

dotsのナビゲーションはpostion:absoluteが適用されているので、position:relativeを適用する要素を変更したいときに使用します

prevArrow

初期値: '<button type="button" class="slick-prev">Previous</button>'

前のスライドへの矢印ナビゲーションを設定します

オリジナルの画像を矢印ナビゲーション使用したいときは'<img scr="画像ファイルパス">'と設定すれば好きな矢印ナビゲーションにできます

nextArrow

初期値: 初期値: '<button type="button" class="slick-next">Next</button>'

次のスライドへの矢印ナビゲーションを設定します

オリジナルの画像を矢印ナビゲーション使用したいときは'<img scr="画像ファイルパス">'と設定すれば好きな矢印ナビゲーションにできます

centerMode

初期値: false

スライドの中央配置

trueにすると前後のスライドが部分的に表示されます

詳しい使い方はこちら

centerPadding

初期値: '50px'

centerModeがtrueの場合に表示される前後のスライドの幅

詳しい使い方はこちら

cssEase

初期値: 'ease'

スライドの切り替えのアニメーション設定

customPaging

初期値: n/a

カスタムページングテンプレート
※すみません、使い方がわかりません

dots

初期値: false

ドットナビゲーションの表示

dotsClass

初期値: 'slick-dots'

ドットナビゲーションを囲む要素のクラス名の設定

draggable

初期値: true

マウスのドラッグでのスライド切り替えを有効にする

fade

初期値: false

スライド切り替えをフェードイン・フェードアウトにする

focusOnSelect

初期値: false

クリックで選択した要素へのフォーカスを有効にする

easing

初期値: 'linear'

jQueryアニメーションのイージングを追加

使用する際はjQueryのEasingプラグインを読み込む必要があります
※Easingプラグインを読み込まないと"linear"と"swing"の2種類しか使用できません

edgeFriction

初期値: 0.15

infiniteオプションがfalseの際、端(最初と最後)のスライドをスワイプした時の抵抗
値が0の場合は端のスライドをスライドがない方向にスワイプしても動きません

infinite

初期値: true

スライドのループを有効にする

initialSlide

初期値: 0

最初に表示されるスライドを指定

lazyLoad

初期値: 'ondemand'

レイジーローディング方法設定します'ondemand' か 'progressive'を設定

詳しい使い方はこちら

mobileFirst

初期値:false

responsiveのオプションを設定している場合、ブレークポイントの小さい方から先に計算して表示します

pauseOnFocus

初期値: true

フォーカスするとautoplayが止まるのを有効にする

pauseOnHover

初期値: true

ホバーするとautoplayが止まるのを有効にする

pauseOnDotsHover

初期値: false

ドットナビゲーションにホバーするとautoplayが止まるのを有効にする

respondTo

初期値: 'window'

responsiveのオプションを設定している場合にブレークポイントを計算する基準を設定
'window', 'slider','min'が設定できます
'min'はウィンドウ幅かスライダー要素幅のどちらか小さい方

responsive

初期値: none

レスポンシブ対応時に設定

Demo2を見る

rows

初期値: 1

2以上するとに1つのスライドに複数のスライドを縦に並べて表示

slide

初期値: ''

スライド要素を指定
クラス名を指定すると、$(element)の子要素で指定したクラス名の要素しかスライドになりません

slidesPerRow

初期値: 1

rowsオプションを2以上に設定している際、複数のスライドを横に並べて表示

slidesToShow

初期値: 1

1つのスライドに複数のスライド要素を表示

slidesToScroll

初期値: 1

切り替わるスライドの枚数を設定

speed

初期値: 300

スライドアニメーション時間の設定

swipe

初期値: true

スワイプでのスライドの切り替えを有効にする

swipeToSlide

初期値: false

slidesToScrollに関係なく、ユーザーがスワイプでのスライドの切り替えを有効にする

touchMove

初期値: true

タッチでのスライド切り替えを有効にする

touchThreshold

初期値: 5

スワイプでのスライド切り替え時、(1/設定値)×スライド要素幅で、次のスライドへ切り替える

useCSS

初期値: true

cssのtransitionを有効にする

useTransform

初期値: true

cssのtranformを有効にする

variableWidth

初期値: false

スライド要素幅の設定を有効にする
これが意外に使えます

詳しい使い方はこちら

vertical

初期値: false

スライドの移動方向を縦にする

verticalSwiping

初期値: false

縦方向のスワイプでのスライド切り替えを有効にする

rtl

初期値: true

スライドの移動方向を逆にする

waitForAnimate

初期値: true

スライドアニメーション中の、ユーザーによるスライドの切り替えを無効にする

zIndex

初期値: 1000

スライダーのz-indexの値


イベント一覧

イベントの使用例は以下のようのとおりです。


$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  //処理を書く
});

afterChange

引数: slick, currentSlide

スライドが切り替わった直後に発火

beforeChange

引数: event, slick, currentSlide, nextSlide

スライドが切り替わる直前に発火

breakpoint

引数: event, slick, breakpoint

responsiveオプションで設定したbreakpointの切り替えが行われた直後に発火

destroy

引数: event, slick

スライダーが破棄された時、またはslickが解除された時に発火

edge

引数: slick, direction

infiniteオプションがfalseの時、端のスライドをスライドできない方向にスワイプさせた時に発火

init

引数: slick

最初にスライダーが初期化された直後に発火

reInit

引数: slick

スライダーが再初期化された直後に発火

setPosition

引数: slick

スライダーの位置/サイズが変更された直後に発火

swipe

引数: slick, direction

スライダーがスワイプ/ドラッグされた直後に発火

lazyLoaded

引数: event, slick, image, imageSource

lazyLoadで設定した画像が読み込まれた直後に発火

lazyLoadError

引数: event, slick, image, imageSource

lazyLoadで設定した画像の読み込みが失敗した直後に発火


メソッド一覧

メソッドの使用例は以下のとおりです。


//スライド追加
$('.your-element').slick('slickAdd',"
"); //スライド再初期化 $('.your-element').slick('setPosition');
slickCurrentSlide

引数: none

現在のスライドのインデックス番号を返す

slickGoTo

引数: slide number(数値), dont animate(ブール値)

slide numberでした番号のスライドに切り替える

slickNext

引数: none

次のスライドへ切り替える

slickPrev

引数: none

前のスライドへ切り替える

slickPause

引数: none

autoplayを止める

slickPlay

引数: none

autoplayをスタートする

slickAdd

引数: HTML or DOM object, index, addBefore

スライドを追加
addBeforeを設定しなければ、indexで指定した要素の後にスライドが追加されます
indexを設定しなければ、最後のスライドを基準にスライドが追加されます
slickRemove

引数: index, removeBefore

指定したスライドを削除
removeBeforeがtrueの場合、indexが指定されていればindex番号の1つ前のスライドを、indexが未指定なら一番最初のスライドを削除する
removeBeforeがfalseの場合、indexが指定されていればindex番号のスライドを、indexが未指定なら一番最後のスライドを削除する

slickFilter

引数: Selector or Function

jQueryのfilter()を使用してスライドを削除

slickUnfilter

引数: index

indexで指定したスライドのslickFilterを解除

slickGetOption

引数: option(文字列)

設定されているオプションの値を取得

slickSetOption

引数: option : (文字列), value : (optionに設定する値), refresh : (ブール値)

スライド個別にオプションを設定
UIを更新する場合はrefreshをtrueにする

unslick

引数: none

slickを解除

getSlick

引数: none

slickの要素を取得


これだけオプションなどが充実しているので、カスタマイズができて、いろいろな場合に対応できるんです!

ただこれだけじゃslickの使い方が良く分からないと思うので、次回は応用編として説明したいと思います。それまでしばしお待ちを〜:)

以下、slickの実用的な使い方を紹介している記事です。ぜひ参考にしてください。