【swiper.js v8】中央のスライドが拡大するスライダーの実装(Vanilla JS)

[ ID : 7495 ]
シルバー
【swiper.js v8】中央のスライドが拡大するスライダーの実装(Vanilla JS)
実装目安
3分

概要

【Vanilla JS】swiper.jsを使用して中央のスライドが拡大するスライダーを実装する方法を紹介。

用途・要件

  • 中央のスライドを拡大するスライダーをswiper.jsで実装。
  • 実際は中央スライド以外を transform: scale(); で縮小することで、中央が拡大しているように見せている。
  • SP時は、スライド1枚表示で左右に画像は見えない設定。
  • スライドは複数枚を想定。
  • 中央以外のスライドを透過にするなど、応用可能。
  • jQueryは使用していない。

検証ブラウザ

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

注意事項

  • swiper バージョン8はIE11非対応です。

その他

  • swiper.js v8.0.7使用。

実装

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

この記事をシェアする

全ての記事を見る

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