記事内に商品プロモーションを含む場合があります
SwiperでSPとPC切り替える
スライダー（カルーセル）を実装する際によくSwiperを使うのですが、PCとSPでスライダーの実行、実行させないの切り替える方法をご紹介します。
下記にサンプルのCodepenを用意したので、よければご確認ください！
See the Pen Swiper Sample by Saori@web dev. (@chisaweb) on CodePen.
目次
先にコードだけ知りたい人向け
先にコードだけサクッと知りたい方向けに、下記コードになります。
class名などは適宜付け替えてご利用ください🙏
(()=>{
let swiper, swiperbool;
const breakPoint = 768; // ブレイクポイント
window.addEventListener('load', () => { //画面の読み込み時に実行
if (breakPoint > window.innerWidth) {
//SPの場合、スライダーOFF
swiperbool = false;
} else {
//PCの場合、スライダーON
createSwiper();
swiperbool = true;
}
}, false);
window.addEventListener('resize', () => { //画面のリサイズ時に実行
if (breakPoint > window.innerWidth && swiperbool) {
// SPかつスライダーがONの場合
swiper.destroy(false, true); //Swiperを削除する（OFFにする）
swiperbool = false;
} else if (breakPoint <= window.innerWidth && !(swiperbool)) {
createSwiper(); //SwiperをONにする
swiperbool = true;
}
}, false);
function createSwiper() {
swiper = new Swiper('.swiper-container');
}
})();解説
今回は、PCの場合はスライダーあり、SPでスライダーなしにする動きになります。
Swiperの場合、リサイズ時に実行ON,OFFの切り替えができないため、ちょっとごにょごにょする必要があります。
まず、Swiperを定義する一文を関数化する
普段、Swiperを定義する際に
const swiper = new Swiper('.swiper-container');と書くことが多いと思うのですが、const を使うと再定義、再代入できないため、Swiperの定義する一文を関数化しておきます。また、swiperboolを使って、スライダーONしている状態なのかOFFの状態なのかを入れておく変数も一緒に定義しましょう！
(()=>{
let swiper, swiperbool;
function createSwiper() {
//Swiper ON
swiper = new Swiper('.swiper-container');
}
})();画面読み込み時の動き
次に最初の画面読み込み時の動きを書いていきます。
window.addEventListener('load',()=>(){},false);を使って、画面読み込み時にSPであればスライダーOFF、PCであれば createSwiperを実行して、スライダーON とします。
これでスマホの時には、スライダーは動かず、PCの場合はスライダーが動く状態にすることができます。
window.addEventListener('load', () => { //画面の読み込み時に実行
if (breakPoint > window.innerWidth) {
//SPの場合、スライダーOFF
swiperbool = false;
} else {
//PCの場合、スライダーON
createSwiper();
swiperbool = true;
}
}, false);画面リサイズ時の動き
そして、画面幅が変わった際にSPの画面幅であればスライダーをやめ、PCの画面幅であればスライダーを動かす、というJSのコードを書いていきたいと思います。
window.addEventListener('resize', () => { //画面のリサイズ時に実行
if (breakPoint > window.innerWidth && swiperbool) {
// SPかつスライダーがONの場合
swiper.destroy(false, true); //Swiperを削除する（OFFにする）
swiperbool = false;
} else if (breakPoint <= window.innerWidth && !(swiperbool)) {
createSwiper(); //SwiperをONにする
swiperbool = true;
}
}, false);画面幅が変わった時に、画面幅がSPの幅でスライダーONになっていた場合、スライダーの動きをなくす必要があるため、swiper.destroy()を使います。
逆にSPの画面からPCの画面になった場合、スライダーを動かす必要があるため、createSwiper()を呼び出してスライダーを動かします。
まとめ
以上、SwiperでSPとPCの動きを切り替える方法をご紹介しました！
