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

[ ID : 7707 ]
シルバー
【swiper.js v4】スライド画像がズーム/左右に移動しながらフェードで切り替わるスライダー(Vanilla JS)

概要

【Vanilla JS】画像がフェードで切り替わるスライダーに、ズームや左右に移動するアニメーションを加える方法を紹介。

用途・要件

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

検証ブラウザ

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

注意事項

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

実装

コンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録