［Swiper］表示枚数をレスポンシブで変えているとき、スライドが表示枚数以下のときはスライドさせない

3070 ワード
JavaScript swiper JavaScript テキストリンク

ただの備忘録

ループ設定(loop: true)をしていると、スライドが表示枚数(slidesPerView)以下のときでもページャやナビゲーションが表示されてしまうので、これを非表示にしたい。

投稿箇所などで、想定よりも記事が少ないときに起こることがある。

スライド1枚のときにスライドをさせない方法の記事は出てくるが、PCでは複数枚の表示をしているので、2枚とかのときもページャやナビゲーションが表示されてしまう。

jsでスライドの枚数によってパラメーターを変えるなどして切り替えようとしたが、Swiperはloopパラメータがレスポンシブに対応していなくうまくいかなかった(下手くそなだけ)。
結局、スライドの枚数によってクラスをつけて、cssで非表示にしただけです。

例

SPのとき(767px以下)スライド1枚表示、タブレット・PCのとき(768px以上)スライドを3枚表示する設定をしているとき

html

<div class="swiper"><!-- Swiperのバージョンが6以下のときは、ラップするクラスはswiper-containerなので注意 -->
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/img01.jpg" alt=""></div>
        <div class="swiper-slide"><img src="img/img02.jpg" alt=""></div>
        <div class="swiper-slide"><img src="img/img03.jpg" alt=""></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

js

let DOM = {};
DOM.swiper = document.querySelector('.swiper');
const swiperLength = DOM.swiper.querySelectorAll('.swiper-slide').length; // スライドの枚数を取得
let swiperOptions = {};

swiperOptions = {
    loop: true,
    slidesPerView: 1, // SPのときは1枚表示
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    breakpoints: {
        768: {
            slidesPerView: 3, // タブレット以上のときは3枚表示
        },
    },
}

if ( swiperLength == 1 ) { // 1枚のとき
    DOM.swiper.classList.add('is-sp-disable'); // SP用のクラスをつける
}
if ( swiperLength <= 3) { // タブレット以上でslidesPerView以下のとき
    DOM.swiper.classList.add('is-pc-disable'); // SP用のクラスをつける
    swiperOptions.breakpoints[768].allowTouchMove = false; // 切り替えさせないオプション追加
}
const swiper = new Swiper(DOM.swiper, swiperOptions);

scss

.swiper {
    &.is-sp-disable {
        .swiper-pagination,
        .swiper-button-next,
        .swiper-button-prev {
            display: none; // ナビゲーションなど非表示
        }
    }
    @media (min-width: 768px) {
        &.is-pc-disable {
            .swiper-pagination,
            .swiper-button-next,
            .swiper-button-prev,
            .swiper-slide-duplicate {
                display: none; // タブレット以上のときは、複製されたスライドも消す
            }
        }
    }
}

これだとスライドが1枚のときもSwiperが実行されてしまうので、if ( swiperLength > 1 ) {処理...}　として、2枚以上のときだけ動くようにして、スライドしていないときのスタイルを別途記述すれば良いと思う。