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
116
Swiper

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

更新日:2022.11.25
495
Swiper

Swiperのデフォルト矢印を消して、任意の画像に変更する方法

更新日:2022.11.26
105
Swiper

Swiperスライダーで最初に表示されるスライド位置を変更する方法

更新日:2022.11.25
184