エンジニアのみなさん!slickでズーム&フェードを実装する方法です

slickではズームの動きはできないと思っている人

slickのオプションにフェードはあるけど、ズームがないんだよなぁ、
slickでズーム&フェードする方法ないのかな?
いつもslick使ってるからズームの動きもslickでできたらいいのになー

今回はこんな悩みに答えます。
slickのオプションにはズームがないので、ズームはできないと思っている方が多いですが、CSSのtransform: scaleなどと組み合わせると実装することができます。

この記事を読むとどうなるか

  • slick.jsを使用して、ズーム&フェードの動きが実装できるようになる
  • slickの表現の幅が広がる
  • slickのオプションにない動きでも「もしかするとできるのでは?」という柔軟な考えができるようになる
しんぺー

こんにちは。
Web制作会社でフロントエンド・エンジニアとして日々Webページのコーディングをしています。
先日slickを使用してズーム&フェードの動きを実装する機会があったので、記事にしてみました。

これまでは、slickのオプションにズームがないので出来ないと思い込んでいましたが、少し調べると実装できました。
ただ、特別な理由がなければズームさせる時はだいたいVegas.jsを使います。

完成形のイメージ

See the Pen Untitled by shimpei (@shimpei) on CodePen.

完成形のイメージはこちらです。
slick.jsを使用してズーム&フェードの動きを実装しています。

実装方法

HTML

HTMLはこんな感じ。
ふつうにslickを使用する時と同じでOKです。

<div class="slider-wrap">
<div class="slide-item">
<img src="https://picsum.photos/2000/2000" alt="">
</div>
<div class="slide-item">
<img src="https://picsum.photos/1000/1000" alt="">
</div>
<div class="slide-item">
<img src="https://picsum.photos/800/800" alt="">
</div>
</div>

CSS

次はCSSです。
slickのオプションにズームがないのでCSS側で動きを作ってあげます。

まず要素を拡大できるtransform:scaleを使用します。
transform:scaleとアニメーション(@keyframes )を組み合わせてズーム用のアニメーションを作成します。

ズーム用のアニメーションはクラス名.slick-animationで呼び出せるようにします(jQueryで使います)。

// スライダーのサイズ
.slider-wrap {
height: 500px;
width: 80vw;
margin: 0 auto;
overflow: hidden;
}

// 画像の表示(オブジェクトフィットなど)
.slide-item>img {
width: 100%;
height: 100%;
object-fit: cover;
}

//ズームする アニメーション
@keyframes fadezoom {
0% {
transform: scale(1);
}

100% {
transform: scale(1.1);
}
}

//このクラス名で、ズームするアニメーションを呼び出せる
.slick-animation {
animation: fadezoom 5s 0s forwards;
}

jQuery

最後にjQueryです。

//slickを初期化した際に発生するイベント(初期表示のスライドに.slick-animationのクラスをつける)
$('.slider-wrap').on('init', function () {
  $('.slick-slide[data-slick-index="0"]').addClass('slick-animation');
})
  .slick({
    autoplay: true,
    infinite: true,
    fade: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    speed: 1000,
    autoplaySpeed: 3000,
    pauseOnFocus: false,
    pauseOnHover: false
  })
  .on({
    // スライドが移動する前に発生するイベント
    beforeChange: function (event, slick, currentSlide, nextSlide) {
      //表示されているスライドに.slick-animationのクラスをつける
      $(".slick-slide", this).eq(nextSlide).addClass("slick-animation");

      //あとで、.slick-animationのクラスを消すための.stop-animationクラスを付ける
      $(".slick-slide", this).eq(currentSlide).addClass("stop-animation");
    },
    // スライドが移動した後に発生するイベント
    afterChange: function () {
      //見えてないスライドにはアニメーションのクラスを外す
      $(".stop-animation", this).removeClass("stop-animation slick-animation");
    },
  });

やっていることはこれだけ

  • 初期表示されているスライドにアニメーションのクラスをつける
  • slickのオプション設定(フェードとか、スピードとか)
  • 表示されているスライドにアニメーションのクラスをつける
  • 非表示のスライドはアニメーションのクラスを外す

要するにCSSで作ったアニメーションのクラスを付けたり、外したりしてるだけです

アニメーションが表示される前後でクラスを付けたり外したりしていますがこれは自分で考えたわけではなく雛形があります。

初期化時に発生するイベント【init】

このイベントは一番最初に記述しないと動かないです。先頭に記述しましょう!

$('.slider').on('init', function(event, slick){
  //ここに初期化した際に発生するイベントを記述します
});

initについて詳しく知りたい方は、下記リンクからどうぞ。
解説がとても丁寧です。
slick – にほんご。【init】Ken Wheeler(kenwheeler)によるslickドキュメントを翻訳/改変したものです。

スライドが移動する前に発生するイベント【beforeChange】

この中に色々書くとスライド移動前に色々実行してくれます。
注意点は、一番最初のスライドには何も起きないところです。

$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  //ここにスライドが移動する前のイベントを記述します
});

slick – にほんご。【beforeChange】

スライドが移動した後に発生するイベント【afterChange】

同様に、この中に色々書くとスライド移動後に色々実行してくれます。

$('.slider').on('afterChange', function(event, slick, currentSlide){
//ここにスライドが移動した後のイベントを記述します
});

こちらも下記外部リンクの解説がとても丁寧です。

slick – にほんご。【afterChange】

jQueryの解説は以上です。

最後に

今回は解説が少し長くなりましたが、コピペでも使えますのでサクッと実装する分にはそこまで時間かからないと思います。

initbeforeChangeafterChangeの内容が分かればslick – にほんご。でも解説されているようにスライドの枚数や、何枚目のスライドかを表示することも可能です。
ぼくも少しずつ使いながら理解を深めていきたいとおもいます。

最後までありがとうございました!