グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

スライドショーを簡単に実装できる slick ですが、ある実装でハマったので対策をメモしておきます。

●やろうとしたこと
スライドの切り替わりに合わせて、スライド内の要素をCSSでアニメーションさせる

slickでは表示中のスライドに「slick-current」というクラスが付与されます。
そこで「slick-current」のありなしでスタイルを変更し、CSS の transition でアニメーションさせるという実装をしました。
しかし、この方法だと一番最初に表示されるスライドで初回のみアニメーションが行われませんでした。

●回避方法
最初に表示させるスライドを1枚目以外にし、スライドショーが準備できたタイミングで（少し遅らせて）1枚目に切り替える、という方法にしました。

// スライドショーが準備できたタイミングで、スライドを1枚目に変更
$(".your-slider").on("init", function(slick){
  setTimeout(function(){
    $(".your-slider").slick("slickGoTo", 0, true);
  }, 100);
});

// スライドショーの設定
$(".your-slider").slick({
  initialSlide: 1, // 開始時は1枚目以外のスライドに設定
  fade: true,
  autoplay: true
});

やや力技ですが、無事に1枚目のアニメーションが実行されました。

●ポイント
・setTimeout で少し送らせないと切り替わらない
・slickGoTo に true を設定すると slick の切り替えアニメーションなしでスライドが切り替わる
・init メソッドはスライドショーの設定よりも前に記述しないと動作しない

以上です。