【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です。