こんにちは、ユアサです。
以前業務でSwiperを使ったスライダーをスマホ表示時に解除してカラム表示にすることがあったので、今回はPC・スマホそれぞれのウィンドウ幅の可変で都度Swiperを実装・解除する方法について備忘録の意味も込めて書きまとめたいと思います。
そもそもSwiperについて
この記事を閲覧していただいている大半の方は知った上でここに辿り着いていると思うので詳しい紹介は省きますが、Swiperはスライダーを簡単に実装できるJSプラグインです。スライダー系プラグインの中でも定番と言ってもいいでしょう。
公式サイトで実装までの手順が書かれていますが、おそらくフロントエンド初心者の方でも簡単に実装できるかと思います。またオプションもかなり細かく設定できるので、こだわるほど自分のイメージに近いスライダーが制作できます。
実際に作成してみるとこんな感じです。
See the Pen Swiperjs-sample by felly (@felly00505) on CodePen.
↓公式サイトのリンクはこちら
スマホ表示時にはスライドをカラム表示にする（Swiperを解除する）
PC・スマホとブラウザ幅に応じてスライドの枚数を増減させるにはオプションでブレイクポイントを設定すれば簡単にできます。しかしスライダーの機能そのものを解除してスライドをカラム表示にするには、Swiper本来の用途から外れるからかオプションでは再現できません。
そこで、かなり単純な発想ではありますが「ブラウザ幅がPCサイズの時だけSwiperを動作させ、それ以外の時は無効・何もしない」JSを作成することにしました。これを作成することで実質的にスマホ表示時にSwiperの動作を解除する目的が達成できます。
では作成してみます。画面が読み込まれたタイミングでSwiperを実装するか既に判定をしていてほしいので、addEventListenerでload（画面の読み込み）時に発火するif文を書きます。
See the Pen Untitled by felly (@felly00505) on CodePen.
（このブログ記事の幅ではスマホ表示しか見れないので、PC表示と比較したい場合はブラウザ幅が768px以上の環境で別タブで開いてみてください）
既にスマホの表示になっているのでお分かりかと思いますが、スライダーとしての機能をなくして通常のカラム表示になっています。
JS内でブラウザ幅が768px以上だった時にだけSwiperが実装されるように指定しています。767px以下では動作はしませんが、Swiperのデフォルトのスタイルが残ってしまうので、こちらは別途CSSで制御してスタイルを解除しています。
クラスの付け替えを行う方法もありますが、今回はJSの記述を簡単に説明するため、CSSで調整しています。
これでひとまず目指していた機能は達成しましたが、現在のままだと画面ロード時にしか対応できないので、今度はもう少し付け足してブラウザ幅が可変した際にも対応できるようにしていきます。
画面のロード時・ブラウザ幅可変時にSwiperを実装するか判定させよう
先ほどのセクションで紹介したコードに加筆して調整したいと思います。
今回はブラウザ幅が変化した時の判定になるので、先ほどと同じくaddEventListenerは使用しますが今度はresize（リサイズされる）時に発火するif文を書きます。
See the Pen swiper_sp_cancel by felly (@felly00505) on CodePen.
（スマホ表示しか見れないので、PC表示と比較したい場合は先ほどのセクションと同様に確認してみてください）
今度はブラウザ幅がリサイズされた際にif文は発火しますが、新たにswiperStatusという名前の変数を用意しました。これはSwiperが実装されている状態であるかの確認用の変数で、リサイズされ且つ既にSwiperの実装の有無が確認されている場合にif文が発火する仕様になっています。
別ブラウザでリサイズしてみると都度実装・解除ができるようになっているかと思います！これでひとまず完成です。
まとめ
Swiperの実装・解除に限らず、オプションの違うスライダーの表示切り替えでも使える方法なのでまあまあ使い所はあるかな？と思います。
しかし今回のコードもまだまだ改善できる余地はあると思うので、今後もいっぱいJSでいじっていきたいと思います。
