【swiper.js v4】スライド画像がズーム/左右に移動しながらフェードで切り替わるスライダー（Vanilla JS）

概要

用途・要件

• ４種類のアニメーションを用意（ズームイン・ズームアウト・左から右にスライド、右から左にスライド）
• アニメーション用のクラスをスライド画像(img)のHTMLに付与する事で、指定のスライドに任意のアニメーションを適用可能。
• アニメーションはCSSのanimationで実装。
• リサイズ中は自動再生(autoplay)が止まるため、animationを一時停止(paused)する。

検証ブラウザ

• Google Chrome(最新)
• Safari(最新)
• Firefox(最新)
• Microsoft Edge(最新)
• IE11

注意事項

• IE11対応のため、swiper4系(バージョン4.5.1)使用。
• 左から右にスライド、右から左にスライドのアニメーションは画像を少し拡大して移動させるため、画像の端が切れる。
• 前のスライドに戻ると画像がカクつくため、ページネーション、ナビボタンは設置していない。

実装