Written by Kasumi

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

目次

関連記事

Swiper

左右に見え隠れするスライダーを高さ固定で実装する方法【swiperを使用】

更新日:2022.11.25
4340
Swiper

【Swiper】自動で無限に横スクロールされるスライダーを実装する方法

2023.11.19
720
Swiper

Swiperでサムネイル固定のスライダーを実装する方法

更新日:2022.11.25
5119
Swiper

【Swiper】指定したindex(インデックス)番号のスライドがアクティブの時、処理を実行する方法

2023.11.21
525