【解説】Swiperでスマホ・PCだけ有効化／無効化する方法【コピペOK】

記事内に広告を含みます

パソ君

・Swiperでスマホだけ無効化とかできる？

こんな疑問にお答えします。

デザインによってはスマホだけスライダーを無効化に、もしくはPC時のみスライダーを無効化にしてほしい。

などなどの要望がありますよね。

実はSwiperならその実装が簡単に可能です。

ジト

すぐにできるよ！

ということで、この記事では「Swiperでスマホ・PCだけ有効化／無効化する方法」について解説していきます！

swiper自体の作り方については下記記事を参考に↓

2023年2月20日【簡単】Swiperの使い方｜初心者向けに解説【オプション】

この記事でわかること

Swiperでスマホ・PCだけ有効化／無効化する方法

【解説】SwiperでPCだけ有効化／スマホで無効化する方法【コピペOK】
【解説】SwiperでPCだけ無効化／スマホで有効化する方法【コピペOK】
【解説】Swiperでスマホ・PCだけ有効化／無効化する方法【コピペOK】：まとめ

【解説】SwiperでPCだけ有効化／スマホで無効化する方法【コピペOK】

PC時のみ有効に、スマホ時は無効化にするSwiperのサンプルがこちら↓

See the Pen swiper　PC時に有効スマホ時に無効 by jito-coder (@jito-coder) on CodePen.

PCで見てる方は、左上の「HTML」ボタンをクリックしてみてください。
反映画面が小さくなり、無効化されるかと。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

@media screen and (max-width: 768px) {
  .swiper-wrapper {
    flex-direction: column;
    row-gap: 20px;
  }
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}

document.addEventListener('DOMContentLoaded', function() {
    var swiper;
    // 有効化時のオプションを記述
    function initializeSwiper() {
        swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 3,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev"
            },
        });
    }
    // 無効化する用の記述
    function destroySwiper() {
        if (swiper) {
            swiper.destroy();
            swiper = undefined;
        }
    }
    // if分を用いて横幅に応じて関数を実行
    function handleResize() {
        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        if (w > 768) {
            if (!swiper) {
                initializeSwiper();
            }
        } else {
            destroySwiper();
        }
    }
    // 初回実行
    handleResize();
    window.addEventListener('resize', handleResize);
});

コードの中で重要な点がこちら↓

通常通りのスライダーを実装
横幅〇〇px～だったら無効化にするプログラムを実装
無効化時用のスタイルをCSSに記述

順に解説してきます。

➀：通常通りのスライダーを実装

まず通常通りのスライダーを実装するHTMLを組み立てます。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

ここに関してはいつも通りでOKです。

➁：横幅〇〇px～だったら無効化にするプログラムを実装

ここが一番重要です。

横幅〇〇px以上だったら有効に～～、〇〇px以下だったら無効に～のプログラムを記述します。

それがこちら↓

document.addEventListener('DOMContentLoaded', function() {
    var swiper;
    // 有効化時のオプションを記述
    function initializeSwiper() {
        swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 3,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev"
            },
        });
    }
    // 無効化する用の記述
    function destroySwiper() {
        if (swiper) {
            swiper.destroy();
            swiper = undefined;
        }
    }
    // if分を用いて横幅に応じて関数を実行
    function handleResize() {
        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        if (w > 768) {
            if (!swiper) {
                initializeSwiper();
            }
        } else {
            destroySwiper();
        }
    }
    // 初回実行
    handleResize();
    window.addEventListener('resize', handleResize);
});

コピペOKです！
4-17行目のオプションと,28行目の横幅数値を変更すれば使いまわせます！

ちなみに下記コード部分にて、Swiperの生成コードをなくして変数を初期化しております。

swiper.destroy();
swiper = undefined;

➂：無効化時用のスタイルをCSSに記述

➁の実装にて無効化／有効化の実装はできました。

ただしこのままでは、Swiper用のCSSが効いており見え方がよくありません。

下記みたいになっているかと↓

そこで新たにCSSを追加して、無効化時のスタイルを指定します。

今回は例として下記の感じに↓

@media screen and (max-width: 768px) {
  .swiper-wrapper {
    flex-direction: column;
    row-gap: 20px;
  }
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}

「縦並び＋余白を20px追加」、そして矢印を削除しました。

ここはデザインに合わせて変えていきましょう。

【解説】SwiperでPCだけ無効化／スマホで有効化する方法【コピペOK】

最後にPCだけ無効化、スマホだけ有効化させたSwiperサンプルを紹介します。

See the Pen swiper　PC時に無効スマホ時に有効 by jito-coder (@jito-coder) on CodePen.

「HTML」ボタンをクリックして、反映画面を小さくした時だけスライダーが実装されていますよね。

といっても作り方は、ほぼ先ほどと同様です。

変えたのがPC時とスマホ時のCSSと、768px以上だったら無効に～というJavaScriptの記述のみです。

.swiper-wrapper {
  flex-direction: column;
  row-gap: 20px;
}
.swiper-button-prev,
.swiper-button-next {
  display: none;
}

@media screen and (max-width: 768px) {
  .swiper-wrapper {
    flex-direction: row;
    row-gap: normal;
  }
  .swiper-button-prev,
  .swiper-button-next {
    display: block;
  }
}

document.addEventListener('DOMContentLoaded', function() {
    var swiper;
    // 有効化時のオプションを記述
    function initializeSwiper() {
        swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 3,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev"
            },
        });
    }
    // 無効化する用の記述
    function destroySwiper() {
        if (swiper) {
            swiper.destroy();
            swiper = undefined;
        }
    }
    // if分を用いて横幅に応じて関数を実行
    function handleResize() {
        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        if (w < 768) {
            if (!swiper) {
                initializeSwiper();
            }
        } else {
            destroySwiper();
        }
    }
    // 初回実行
    handleResize();
    window.addEventListener('resize', handleResize);
});

デザインや仕様に合わせて数値等を変えてみてください！