【slick】一段階上のslickスライダーのご紹介

一段階上のslickの使い方

slickの基本的なカスタマイズ方法をご紹介しましたが、これからはより表現の幅を広げた応用編となります。サンプルのコードを用意しているので参考にして作ってみてください。

前後の画像が少し見えるスライダー

前後の画像が見えるようなスライドはオプション「centerMode」を使用します。前後の画像がどのくらい見せるかを設定する「centerPadding」と一緒に使うのが一般的。

centerPaddingはpxなど固定値でも大丈夫ですし、％やvwなど相対的に設定することも可能です。

ちなみに[centerPaddingの値 x 2]した幅がスライダー内の画像の幅以上になると何も見えなくなるのでご注意ください。

サイズがバラバラな画像を入れたスライダー（variableWidth）

ここまではスライダー内で使用した画像のサイズを統一させていました。ところがサイズが違う画像を入れたい！ということだってあるかもしれません。
そんなときに便利なのが「variableWidth」です。違う幅の画像を扱う場合は検討するとよいオプションです。

大きさがバラバラな画像で高さも揃えたい場合

「画像の高さをvwで指定して、最大高さと最小高さを設定する」

これでほとんどのブラウザ（Chrome/ IE / Edge/ Firefox / Safari それぞれ最新版で検証しました）でも見え方は変わらず、きれいに表示されるようになります！

ちなみにブラウザの幅を変えても崩れません！

ポイント1：高さをvwで指定する

pxでも%でもなく、vwで設定してください。（emでもCSSによったらできるかもしれません)。
pxだと画面幅を変えたときに崩れてしまう、%だと親要素の幅の影響を受けてしまうのでうまくいかない…となり、vwを設定すると画面幅の変更にも柔軟に対応できるようになります。例ではvwを30に設定していますがこれは1でも100でも大丈夫です。

「高さがvwで指定されてある」ということが重要になります。

 
ポイント2：最大高さと最小高さを設定する

高さをvwで設定すると、画面幅によって高さが変化します。幅が広くなればなるほど画像の高さも高く、狭くなればなるほど小さくなります。

そうなると見た目が非常に残念なことになるので、最大高さと最小高さを設定して、最低限の見た目を担保しようというわけです。

レスポンシブ対応のスライダーにする（responsive）

いよいよslickの強みであるレスポンシブ対応について解説していきます。
オプションは「responsive」を使います。そのまんまですね。コードは以下のような感じで書きます。

他のオプションと同様に「responsive: 値」という形式なのですが値の部分が配列になります。
その中にブレイクポイントとその時の設定を書いていきます。

なお、デフォルトではブレイクポイントの判定は「画面幅」ですが、オプション「respondTo: ‘slider’」と設定するとスライダーの幅で切り替えをすることもできます。