White Space
WebLife

swiper でスライダーをスマホサイズではON、PCサイズではOFFにする

  • HTML
  • Javascript

あるサイトで、スマホ時はスライダーを使い、PC時はスライダーを切るという事をやる必要がありました。しかし、PCで開いてからウィンドウをスマホサイズにした時にスライダーがうまく動きませんでした。

今回はスライダー ON と OFF をしっかり行い、どんなサイズでも崩れずに表示させる方法です。 スライダーjsライブラリの「swiper」を使用しています。

Swiper のコーディング

HTML

<div class="swiper-container your-slider-name">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
 
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
 
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

Javascript

$(function() {
    //swiper 768以下で起動
    var swiper; 
    $(window).on('load resize', function(){
        var w = $(window).width();
        if (w <= 768) {
            if (swiper) {
                return;
            } else {
                swiper = new Swiper('.your-slider-name', {
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                });
            }
        } else {
            if (swiper) {
                swiper.destroy();
                swiper = undefined;
            } 
        } 
    });
});

.your-slider-nameはスライダー起動のクラスです。適当なクラス名に変更して使いましょう。やっていることとしては下記になります。

  • 768以下
    └ swiper が ON なら、何もしない（returnする）
    └ swiper が OFF なら、swiper を起動する
  • 769以上
    └ swiper が ON なら、swiper を消滅させる（destroy()で生成コードを消し、swiper = undefinedで変数を初期化）
    └ swiper が OFF なら、何もしない

CSS の設定は PC と SP で任意のスタイリングを行ってください。以上 swiper の表示を切り替える方法でした。