swiperでスライド切り替え時に複雑なアニメーションをつけたい

swiperではeffectにfadeやflipなどを指定すれば、簡単にスライド切り替え時のアニメーションをつけることが出来ます。しかし、実際の案件ではswiperのAPIに用意された切り替えエフェクトのみでは対応できない場合が多いです。(エンタメ系のサイトだと特に) そういった場合に、アニメーションをつけやすくするためにどうすればいいか。

サムネが複数あって、1枚だけ表示されているスライドが切り替わるような実装

①まず、マークアップですが<swiper-slide>の中にいきなりテキストや画像を置くのではなく、インナー専用のdivを作成しておきます。

<div class="swiper-slide">
    <div href="slide-inner">
      <p>テキスト</p>
      <figure>画像</figure>
    </div>
  </div>

②swiperのオプションでeffect: 'fade'を指定(そうすることですべてのスライドが同じ位置に重なります)

③speed を 0 にし、transitionが効かないようにする(一瞬で切り替わるように)

④現時点だと背景色を指定しないと下のレイヤーにある要素が重なって見えてしまうので、activeクラスがついた時のみopacityが1になるよう、cssを !important で上書きする

.swiper-container-fade .swiper-slide {
    opacity: 0 !important;
    &.swiper-slide-active {
      opacity: 1 !important;
    }
  }

⑤また、opacityで消しただけだと要素に触ることは出来てしまうので、activeがついた時のみ触れることが出来るようにする。

.swiper-container-fade .swiper-slide {
    opacity: 0 !important;
    visibility: hidden !important; // 追加
    &.swiper-slide-active {
      opacity: 1 !important;
      visibility: visible !important; // 追加
    }
  }

⑤後はcssでactiveクラスがついたときのアニメーションを設定するだけ

.swiper-container-fade .swiper-slide {
    opacity: 0 !important;
    visibility: hidden !important;
    .slide-inner {
      opacity: 0; // slideの中のインナーにアニメーションを設定する
      transition: opacity .5s ease-in;
    }
    &.swiper-slide-active {
      opacity: 1 !important;
      visibility: visible !important;
      .slide-inner {
        opacity: 1;
      }
    }
  }

これで、アニメーション設定の自由度がかなり高くなりました。 さらにdivを増やせば、複雑なアニメーションを設定することも可能だと思います。

まとめ

speedを0にすることで一瞬でスライドが切り替わるので、切り替わる時間とアニメーションの時間を合わせる、など気にせずを実装することが出来る。

swiperのcssをリセットしたい場合は、!importantを使ってもよい

基本<swiper-slide>には何も指定しない、ただスライドを囲むだけのdivにすると後々更新が楽