slickのカレントクラスを利用した実装サンプル

中央のスライド以外を透過させる

slickで用意されているcenterModeを利用している想定で、中央のスライドは通常の見栄えで表示させ、それ以外（このサンプルの場合は左右のスライド）のものは少し透過されるというものです。
まず、HTMLとjQueryはそれぞれ下記のようにシンプルな記述を使用し、jQueryは必須オプションとしてcenterModeを指定しておきます。

<div id="slick">
  <div><img src="img01.jpg"></div>
  <div><img src="img02.jpg"></div>
  <div><img src="img03.jpg"></div>
    ・
    ・
    ・
</div>

$(function() {
  $('#slick').slick({
    centerMode: true
  });
});

上記で実装したものに対してCSSを下記のように指定することで、中央のスライド以外を透過させる動きを実装できます。

.slick-slide {
  transition: .3s ease;
}
.slick-slide:not(.slick-current) {
  opacity: .5;
}

.slick-slideというclassはslickで各スライド要素に対して付与されるclassで、このclassにopacityを指定することで要素を透過させるのですが、そこに:not()を使って中央に表示されているスライドに付与されているclassである.slick-currentには適用されない形にします。

実際の見栄えについては以下デモで確認できます。

中央のスライドを大きく #1

中央のスライドを他のものより大きく見せるというものですが、正確には中央以外のスライドを小さくすることにより中央が大きく見えるようにしています。

HTMLとjQueryは「中央のスライド以外を透過させる」と同じものを使用するので省略し、CSSを下記のように指定します。

.slick-slide {
  transition: .3s ease;
  transform: scale(.85);
}
.slick-current {
  transform: scale(1);
}

まず、.slick-slideに対してtransform: scale(.85);を指定することで通常のスライドを小さく表示させ、その後中央に表示されるスライドに付与される.slick-currentにはtransform: scale(1);で縮小を解除するスタイルを記述することで、中央のスライドを大きく見せることができます。

中央のスライドを大きくするのだから単純に.slick-currentに対してtransform: scale()で大きくなるよう指定するだけでいいのではと思う人もいるでしょうし、もちろんそれでも実装はできるのですが、その場合はスライド要素を括っている親要素のスタイル調整（overflowの解除など）なども必要になってくるので、今回はそういった調整も必要なく手っ取り早くできる方法としてデフォルトサイズを小さくすることで中央を大きく見せる形を紹介しました。

実際の見栄えについては以下デモで確認できます。

中央のスライドを大きく #2

先ほどの方法で中央のスライドを他のものより大きく見せることはできましたが、transform: scale()を用いたことによりスライドの左右に大きく余白があるような見栄えになります。
デザイン的に余白があっても問題ないならそのままでいいですが、余白が必要ないという場合はtransform-originを使ってそれぞれの原点を調整することで余白がない状態で見せることができます。

HTMLとjQueryは「1. 中央のスライド以外を透過させる」と同じものを使用し、CSSを下記のように指定します。

.slick-slide {
  transition: .3s ease;
  transform: scale(.85);
  transform-origin: 100% 50%;
}
.slick-current {
  transform: scale(1);
  transform-origin: 50% 50%;
}
.slick-current + .slick-slide {
  transform-origin: 0 50%;
}

若干無理矢理感ありますが、上の実装イメージで左に見えるスライドの指定として.slick-slideにtransform-origin: 100% 50%;を、中央に表示されているスライドの指定として.slick-currentにtransform-origin: 50% 50%;を、右に見えるスライドの指定として.slick-current + .slick-slideにtransform-origin: 0 50%;をそれぞれ指定することで、実装イメージのように余白がない状態で中央を大きく見せるスライドを実装できます。
表示される幅が決め打ちとかであればmarginを使って調整とかでもいいですが、レスポンシブとかリキッドレイアウトで使用する場合はこのようにtransform-originを使った方が何かと楽な印象でした。

実際の見栄えについては以下デモで確認できます。

中央のスライドを大きく＋α

上で紹介してきた中央のスライドを大きく見せる動きへさらに＋αして、より中央のスライドを目立つようにしてみます。

HTMLとjQueryは「1. 中央のスライド以外を透過させる」と同じものを使用するので省略し、CSSは「3. 中央のスライドを大きく #2」をベースにしたような形で下記のように指定します。

.slick-slide {
  transition: .3s ease;
  transform: scale(.85);
  transform-origin: 110% 50%;
  filter: blur(7px);
}
.slick-current {
  position: relative;
  z-index: 2;
  transform: scale(1);
  transform-origin: 50% 50%;
  filter: blur(0);
}
.slick-current + .slick-slide {
  transform-origin: -10% 50%;
}

通常のスライドを小さく表示しつつブラー処理（filter: blur()）をかけ、それらを中央にきた場合に解除してあげることで上のイメージのような見栄えにできます。
単純にfilter: blur()を追記するのでもそれっぽくはなりますが、それだけだとブラーをかけたスライドの両端の見栄えが個人的に気になったので、それが見えないようにするためにtransform-originのX軸の値を少し調整しています。

今回のサンプルはブラーのみですが、例えばfilter: grayscale()も使って白黒にするとかopacity使って少し透過させるといったように、少し調整するだけでも様々な見せ方にすることも可能です。

実際の見栄えについては以下デモで確認できます。

キャプション（テキスト）を表示する

左右に見えるスライドでは表示されず、中央にきた場合にキャプション（テキスト）を表示するものです。
まず、HTMLを下記のように記述し、各スライドの要素内には表示したい画像に加え<p class="caption"></p>で括ったテキストを記述しておきます。

<div id="slick">
  <div>
    <img src="img01.jpg">
    <p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div>
    <img src="img02.jpg">
    <p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div>
    <img src="img03.jpg">
    <p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
    ・
    ・
    ・
</div>

slickでは特に必要な指定はありませんが、上の実装イメージと同じ形にしたい場合はオプションとしてcenterModeを指定しておきます。

$(function() {
  $('#slick').slick({
    centerMode: true
  });
});

上記で実装したものに対してCSSを下記のように指定します。

.slick-slide {
  position: relative;
}
.slick-slide .caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: calc(100% - 40px);
  padding: 20px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transition: .3s ease;
}
.slick-current .caption {
  opacity: 1;
  transition-delay: .5s;
}

必須のスタイルは.slick-slide .captionに記述しているopacity: 0;と.slick-current .captionに記述しているopacity: 1;で、これでとりあえず通常はキャプションが表示されずにスライドが中央にきたときに表示されるという動きを実装できます。
あとは、それに装飾を加えれば実装イメージのような見栄えになり、さらに今回のサンプルの場合はtransitionを指定してふわっと表示されるようにしています。
また、.slick-current .captionに対してtransition-delayを指定することで、スライドが切り替わって少し経ってからキャプションが表示されるようにもしています。

実際の見栄えについては以下デモで確認できます。

フェード切り替え時の動きにひと手間加える

これまでは停止時でもわかりやすいサンプルでしたが、こちらは切り替え時のフェードの動きに手を加えるというものです。
まず、HTMLは特別な記述はせず下記のようなシンプルなものを使用します。

<div id="slick">
  <div><img src="img01.jpg"></div>
  <div><img src="img02.jpg"></div>
  <div><img src="img03.jpg"></div>
    ・
    ・
    ・
</div>

このサンプルはスライド切り替え時にフェードの動きにひと手間加えるものなので、slickの呼び出し時にはオプションとしてfadeを指定します。
また、speedとcssEaseのオプションを併せて指定し、その際指定する値は後述するCSSと合わせる形にしておきます。

$(function() {
  $('#slick').slick({
    fade: true,
    speed: 800,
    cssEase: 'cubic-bezier(.645, .045, .355, 1)'
  });
});

CSSは下記のように記述し、その際transition-durationやtransition-timing-functionの値はslickのオプション（speedとcssEase）で指定したものと合わせる形にしておきます。

.slick-slide img {
  transform: scale(1.2);
  transition: .8s cubic-bezier(.645, .045, .355, 1);
}
.slick-current img {
  transform: scale(1);
}

上記をそれぞれ記述して動きを確認すると、単純にフェード指定したときとは違って、切り替わる際にもともと表示されていたイメージが拡大しながらフェードアウトし、次に表示されるイメージが縮小しながらフェードインするような動きになります。
ちなみに、transform: scale()の値を逆にすることでフェードイン・アウト時のイメージの拡大・縮小を逆にすることができ、さらにイージングやスピードの組み合わせ方次第でもいろいろな見せ方が可能なので、興味ある人はいろいろ試してみてください。

実際の見栄えについては以下デモで確認できます。