【swiper】スライド時にズーム機能をつけれるスライダーを実装【簡単】

スライダーでスライドさせる要素にズーム機能(拡大・縮小)を実装したい。
色々カスタマイズできた方がいい。(ページネーションなど)

このような疑問に答えます!

本記事ではswiperを使って、ズームさせながらスライドさせる方法について紹介します。

swiperを準備しよう

上記のCDNコードをhead内にコピペしましょう。
参考:下記公式サイト様より
https://swiperjs.com/

下記、コードペンデモです。

See the Pen ズームスライダー by Kohei (@kouk05) on CodePen.default

まずはHTMLでスライダー要素を記述、次にJSでswiperを起動させましょう。最後にCSSで装飾します。
注意点としてJSの記述はスライダー要素のソースの後に読み込むようにしてください。
これでズーム機能を搭載したスライダーの完成です!
現状CSSでズームアウトの処理をしています。
ズームアップにしたい場合は@keyframes zoomUpの0-100の値を反対にすればOKです。

Ads

関連記事

JavaScript プログラミング

【簡単】jQueryとCSSを使って要素をふわっと出す方法【プラグイン不要】

更新日:2022.04.05
34
JavaScript プログラミング

【簡単】slickスライダーをデバイス幅(PC・スマホ)によって機能を有効または無効にする方法

2022.02.10
222
JavaScript プログラミング

スクロール中、要素をふわっと出す。scrollrevealjs の使い方について【簡単便利】

2019.12.01
109
JavaScript プログラミング

jQueryで画像読み込み完了後にイベントを実行する方法

2022.04.26
87