こんにちは、エンジニアのアンドレです。
最近案件でslickを使ってスライドショーのカスタマイズを3件ほど行ったのですが、その際に多少調べたり詰まったりしたので、備忘録も兼ねてこちらでご紹介したいと思います。

幅固定での中央寄せ

中央寄せ用に「centerMode」というオプションがあり、それを「true」にすれば幅可変の中央寄せは簡単にできます。
しかし、例えばPC表示でコンテンツ幅が決まっていて、その幅分を確保して中央寄せにしたい場合に、なかなかうまくいかずに苦労しました。
結論から言うと、オプション「variableWidth」に「true」を指定し、スライドさせる要素（下の例では「.item」）に固定幅を指定することで実現できました。

See the Pen 幅固定での中央寄せ by Takamasa Okada (@NP-okada) on CodePen.

ページャーの左右に戻る・進むボタンを配置

デフォルトだと戻る・進むボタンとページャーの要素が並列で並んでいる（下の画像参照）ため、特にスライド数が可変の場合、ページャーの左右にボタンを配置するには不向きな構造になっています。

戻るボタン、スライド、進むボタン、ページャーの順に要素は並列

そこで、ナビゲーション用の要素を作り、その中にページャーとボタンをまとめて入れることで、スライド数の増減にも対応しつつページャーの左右にボタンを配置することが可能となります。
やり方は、オプション「appendArrows」および「appendDots」に同じ要素を指定し、その要素にdisplay:inline-blockとposition:relativeを指定した上で、ボタンをそれぞれ左右に絶対配置してやればOKです。

See the Pen ページャーの左右に戻る・進むボタンを配置 by Takamasa Okada (@NP-okada) on CodePen.

現在の位置／全スライド数の表示

公式サイトの「Events」にある通り、初期化等のタイミングで発生するイベントを通じて、そのタイミングで任意の処理を実行できます。
今回は初期化時に今のスライドが何番目か、また全部で何スライドあるかを取得して出力すること、またスライドした後に今のスライドが何番目かを再度取得して入れ替えることをしています。
注意すべき点は2つで、1つは以前の記事にも書いた通り、slick()の前に「init」イベントに処理を指定することです。
そしてもう1つは、実は公式に書いてある、それぞれのイベント時に渡される引数が、完全にその通りではないことです。
例えば、「init」時の引数は「slick」としか書かれていませんが、実際は第1引数が「event」、第2引数が「slick」となっています。
今回必要だった、開始時のスライドが何番目か、また全部で何スライドあるかという情報は、第2引数のslickオブジェクトが持っているものでした。
そのため、引数として渡されたeventのプロパティを見て違和感を覚えるまで、多少の時間を無駄にしてしまいました。
「afterChange」イベントの引数に関しても、書いてある内容と違っているので、各イベント時の引数に関しては、参照前に一度console.log()で確認したほうが良いと思います。

上記に関して追記：
GitHubのREADME.markdownに書いてある情報が、おそらく正確かと思います。

See the Pen 現在の位置／全スライド数の表示 by Takamasa Okada (@NP-okada) on CodePen.

まとめ

プラグインを使う利点は、基本的なメカニズムをプラグインに投げてしまえる点だと思います。
またメジャーなプラグインであれば、豊富なオプションが用意されていてカスタマイズも容易なので、お客様の要望に応じたものを少ない工数で実現できます。
一方、今回ご紹介した例のように、試行錯誤してそのプラグインの挙動等に対する理解を深めないといけない場面もあります。
ただ、その過程でプラグインの挙動を把握したり、リファレンスから必要な情報を得たりすることで、より複雑なカスタマイズが可能となりますし、プラグイン全般に対する扱い方のコツのようなものも分かってくるので、今後もうまく付き合っていきたいと思っています。