[jQuery]Slickで画像をズームアウトさせながらスライドさせる

2018/8/10追記

修正忘れてました。
説明がややこしくなりそうなので別の記事で書きます。
こちら。

2018/5/2追記

すみませんこの方法IE11だとはみ出した部分が表示されてしまい、ちらつきが出ちゃって使えませんでした、、、
全画面背景になら使えると思います。
BxSliderを使ったらもっと簡単にできるかも。今度まとめます。。

経緯

この動きをしようと思ったけど参考サイトのJS覗いたら処理が難しすぎてハァ？ってなったのでもっと簡単にできるだろ！！！と思って考えた結果。プラグインの機能の範囲で済ましてるし自分ではこっちのが良い。
initの発火タイミングが.slickより前っていうのがめっちゃわかりにくかった。

要点

• ズームアウトの動きは CSSのAnimation
• movingクラスにズームアウトするアニメーションを呼び出し
• なんでもかんでもSlickのコールバックで処理

CSS

.slick-slideに.movingが付くようにコールバックを設定するので、
.slick-slide.moving{ ここにアニメーションを呼び出し。 }

0% → transform: scale(1.2)
100% → transform: scale(1)

という感じで最初が大きくもとに戻っていくアニメをつくる

JS

$(‘.slider’).slick()　が基本の形なんだけども、
初期化された時実行される init のコールバックを使いたいので一番最初にinitの命令を書く。
これをやらないと1枚目にmovigクラスが付かず止まってしまう。

次にslickを呼び出し、色々設定、

最後に beforeChange のコールバックで下記の命令を実行。

• 最後のスライド番号を判定するためlengthを使ってスライドの数を数える
• 現在の2個前のスライドからmovingクラスを除去
  （余分に動かし続けないとスライドの切り替わり時に動きが止まってしまう）
• 次のスライドにmovingクラスを付加
• 最初に戻った（data-slick-indexが0になった）ら最後のスライドからmovingクラスを除去
  （こうしないと最後のスライドからmovingクラスが消えない）

$('.slider').on('init', function(){
  $('.slick-slide[data-slick-index="0"]').addClass('moving');
})
  .slick({
    arrows: false,
    dots: false,
    infinite: true,
    fade: true,
    speed: 2400,
    autoplay: true,
    pauseOnHover: false,
    autoplayspeed: 5000,
    centerMode: true
  })
  .on('beforeChange', function(event, slick, currentSlide, nextSlide){
    var slide_num = $('.slick-slide').length;
    $('.slick-slide[data-slick-index="'+ ( currentSlide - 1 ) +'"]').removeClass('moving');
    $('.slick-slide[data-slick-index="'+nextSlide+'"]').addClass('moving');
    if( currentSlide == 0 ){
      $('.slick-slide[data-slick-index="'+ ( slide_num - 1 ) +'"]').removeClass('moving');
    }
  });

以上！！