先日、実務でSwiperがスマホのときに拡大できない。と指摘を受けました。
私自身も意識して、Swiperを拡大したことなかったので、まさかと思って試したらできませんでした。
確かに、スマホでは画像が細かいとみにくいので、拡大したくなる気持ちは分かります。
今回は、どのようにして、Swiperの画像を拡大できるようにしたのかを、記録しておきます。
同じような問題で困っている方の参考になれば幸いです！
Swiperの構築から学びたい方、見直したい方は【Swiperの基本】シンプルで美しいスライダーを作成する方法！をご覧ください。
Webサイトでスライダーを使用すると、コンテンツを魅力的に見せることができます。 しかし、スライダーを自分で一から実装するのは難しく、手間がかかます。 そんな時に役立つのが「Swiper」というライブラリです。 Swip[…]
それでは、スマホでSwiperを拡大できるようにしていきましょう。
- Swiperがスマホで拡大できない原因
- Swiperをスマホで拡大させる方法
- SwiperのデフォルトのCSSを変更したさいの注意事項
Swiperがピンチアウト（拡大）できない原因はなに？
では最初に問題点の切り分けをしたいと思います。
原因があるとすれば、HTML全体のCSSか、Swiperのどちらかです。
動作を確認したとこと、Swiper上で拡大を使用とすると、確かに拡大できません。
Swiper以外のところ、他のセクションなどは問題ありませんでした。
ということは、Swiper自体に問題がありそうです。
では、なぜSwiperは拡大ができないのでしょうか。まずは、原因を調べていこうともいます！
スマホでのピンチアウト（拡大）に対応していない。
調べてみると、Swiperはピンチアウト（拡大）に対応していないみたいです。
CSSかjsか、どちらかで拡大ができないように制御をかけているようです。
では、その制御を解除して、拡大ができるようにしてみます。
Swiperの拡大オプション「zoom」を使ってみる。
Swiperの拡大オプションのzoomとは、Swiperに挿入されている画像を拡大させるためのオプションです。
では、zoomオプションを追記してみます。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="./images/img-01.jpg">
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="./images/img-01.jpg">
</div>
</div>
</div>
</div>const swiperMain = new Swiper('.main-swiper', {
zoom: {
maxRatio: 5,
minRatio: 1,
}
});オプションの詳しい解説については、Swiperの公式サイトをご覧ください。
上記のリンクから飛んでもらえれば、zoomオプションの箇所へ遷移します。
では、本題に戻りますが…「zoom」オプションを入れただけではダメでした。
HTMLも公式のものを参考して導入、コンソールにもエラーがでていない。
動作は、画像がSwiperのコンテンツ内で画像が拡大縮小できるようになりました。
私は、Swiper全体を拡大したいので、Swiperのコンテンツ内、swiper-slideの中だけで拡大するのでは、実装したい動作とは違います。
Swiperにデフォルトで適用されているCSSを確認してみる。
Swiperの拡大縮小が、jsでの制御でないとすれば、CSSでの制御が考えられます。
CSSを見直してたところ、swiper-horizontalというクラス名に、なにやらあやしいCSSの記述を見つけました。
.swiper-horizontal {
touch-action: pan-y;
}swiper-horizontalに適用されているtouch-actionについて調べてみた。
touch-actionは、スマホデバイスでのタッチ操作の制御に使われます。
主な動作は、以下の通りです。
| 値 | 動作 |
| auto | デフォルト（制御しない） |
| none | タッチで反応させない |
| pan-y | 縦方向のスクロールのみ許可 |
| pinch-zoom | ズームのみ許可 |
| manipulation | ダブルタップでの拡大を無効化。スクロールとズームは可能。 |
つまり、touch-action: pan-y;が設定されているというこは、「縦スクロール」のみしかSwiperのコンテンツ上では許されていないということです。
Swiperには、多様なオプションがあるので、そのオプションを制御するために設定されているのでしょう。
今回は、拡大したいので「auto」に上書きして動作を試したいと思います。
.swiper.swiper-horizontal {
touch-action: auto;
}touch-action: auto;で無事にスマホで拡大ができるようになった！
うまくいきました！これで、スマホ表示のときに拡大ができるようになりました。
拡大といっても、スマホでいうピンチアウトなので、通常の動作に戻した。という方が正しいですが。
Swiperのオプションによっては、touch-action: auto;を適用させない方がいい。
前述しましたが、Swiperは多様なオプションがあります。
今回は、シンプルなSwiperでしたので、.swiper-horizontalにtouch-action: auto;で解決することができました。
ですが、設置するSwiperの設定によっては、動作エラーが起きる可能があります。
縦スクロールのみをデフォルトで指定しているということは、何かしらのSwiperオプションに影響すると考えた方がいいです。
私は、まだそのようなSwiperの設置をしたことがないので、案件であたったら本記事をに記載して共有します。