【swiper】スライド時にズーム機能をつけれるスライダーを実装【簡単】
スライダーでスライドさせる要素にズーム機能（拡大・縮小）を実装したい。
色々カスタマイズできた方がいい。（ページネーションなど）
このような疑問に答えます！
本記事ではswiperを使って、ズームさせながらスライドさせる方法について紹介します。
下記、コードペンデモです。
See the Pen ズームスライダー by Kohei (@kouk05) on CodePen.default
まずはHTMLでスライダー要素を記述、次にJSでswiperを起動させましょう。最後にCSSで装飾します。
注意点としてJSの記述はスライダー要素のソースの後に読み込むようにしてください。
これでズーム機能を搭載したスライダーの完成です！
現状CSSでズームアウトの処理をしています。
ズームアップにしたい場合は@keyframes zoomUpの0-100の値を反対にすればOKです。
目次
