Swiperは簡単にスライダーを作ることが出来る人気プラグインです。
以前、Swiperで作ったスライダーを埋め込んでいたWebサイトでPCだけスライダーを作成し、スマホではスライダーを解除したいという要望がありました。
Swiperのオプションをいろいろ調べてみましたが、それらしい指定はありませんでした。
そこでJavaScriptを駆使して、ブレイクポイントでSwiperスライダーを作成、解除することにしました。
この記事ではその時作成したコードの解説と合わせてご紹介したいと思います。

完成コード

まずは完成コードをご紹介します。

Swiperを解除したい側では以下のCSSの指定が必須です。

@media screen and (max-width: 767px) {
  
    .swiper-wrapper {
        display: block;
    }
  
}

そしてJavaScriptはこちら。

let SwiperSlider = null; 

/* Swiperを作成する関数 */
function initSwiper() {
    if( SwiperSlider === null ) {
        SwiperSlider = new Swiper('.swiper', {
            loop: true,
        });
    }
}

/* Swiperを解除する関数 */
function destroySwiper() {
    if( SwiperSlider !== null ){
        SwiperSlider.destroy(false, true);
        SwiperSlider = null;
    }
}

/* 【読み込み時と画面リサイズ時】
画面サイズが768px以上でSwiperを作成
767px以下の場合はSwiperを解除する */
$(window).on('load resize',function(){
    if( $(window).width() >= 768 ){
        initSwiper();
    }
    else{
        destroySwiper();
    }
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

コードの解説

ここからはコードの解説です。

let InterviewSlider = null;

最初に、InterviewSliderという変数を宣言し、初期値をnullに設定しておきます。
この変数は後でSwiperインスタンスを格納するために使用します。

/* Swiperを作成する関数 */
function initSwiper() {
    if( SwiperSlider === null ) {
        SwiperSlider = new Swiper('.swiper', {
            loop: true,
        });
    }
}

これがSwiperを作成る関数です。

initSwiper()関数を呼び出した時、変数SwiperSliderがnullの場合に.swiperクラスをSwiperスライダーにします。

そして、変数SwiperSliderの中にはSwiperインスタンスが格納されます。

SwiperSlider = new Swiper('.swiper', { ... });

この部分にはSwiperのオプションを使い、詳細な設定を指定します。

/* Swiperを解除する関数 */
function destroySwiper() {
    if( SwiperSlider !== null ){
        SwiperSlider.destroy(false, true);
        SwiperSlider = null;
    }
}

これがSwiperを解除する関数です。

$(window).on('load resize',function(){
    if( $(window).width() >= 768 ){
        initSwiper();
    }
    else{
        destroySwiper();
    }
});

この関数は画面の読み込み完了時と画面リサイズ時に実行されます。
画面サイズが768px以上の時は、initSwiper()関数を実行します。

逆に768px未満はdestroySwiper()関数を実行します。

これにより、768px以上の場合は、initSwiper()関数によってSwiperスライダーが作成され、768px未満の場合は、destroySwiper()関数によってSwiperスライダーが解除されます。

そして、768px未満で適応されるCSSの中に以下を用意しておきます。

@media screen and (max-width: 767px) {

    .swiper-wrapper {
        display: block;
    }

}

.swiper-wrapperにはdisplay: flexが指定されているため、これを上書きする必要があります。

これでブレイクポイントでSwiperを作成したり解除したりすることが出来ます。

まとめ

いかがでしたか？
ブレイクポイントでSwiperを作成したり解除したりする方法をご紹介しました。
PCだけスライダー化したい、スマホだけスライダー化したいというのはよくあることです。
今回ご紹介した方法で簡単に切り替えることが出来るので是非使ってみて下さい。

最後にもう一度、今回ご紹介したコードを記載します。

CSSはこちら。

@media screen and (max-width: 767px) {
  
    .swiper-wrapper {
        display: block;
    }
  
}

JavaScriptはこちら。

let SwiperSlider = null; 

/* Swiperを作成する関数 */
function initSwiper() {
    if( SwiperSlider === null ) {
        SwiperSlider = new Swiper('.swiper', {
            loop: true,
        });
    }
}

/* Swiperを解除する関数 */
function destroySwiper() {
    if( SwiperSlider !== null ){
        SwiperSlider.destroy(false, true);
        SwiperSlider = null;
    }
}

/* 【読み込み時と画面リサイズ時】
画面サイズが768px以上でSwiperを作成
767px以下の場合はSwiperを解除する */
$(window).on('load resize',function(){
    if( $(window).width() >= 768 ){
        initSwiper();
    }
    else{
        destroySwiper();
    }
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.