[swiper.js]スマホ表示時に壊れる場合の確認ポイント

やらかした

表示数がおかしい場合
1. 原因と解決方法
動かない場合
1. 原因と解決方法
まとめ

表示数がおかしい場合

6枚表示のスライドを作った。

const swiperSample = new Swiper('#swiper_sample', {
    slidesPerView: 6,
});

幅に合わせて表示量を変えたくなった。

const swiperSample = new Swiper('#swiper_sample', {
    slidesPerView: 6,
    breakpoints: {
        420: { slidesPerView: 2, },
        768: { slidesPerView: 4, },
        1024: { slidesPerView: 5, },
        1200: { slidesPerView: 6, },
    }
});

スマホ幅（416px）にしたらPCと同じく6個並んでんだけど。

原因と解決方法

breakpoint外で設定した数字が反映してるせい。

こうすればOK。

const swiperSample = new Swiper('#swiper_sample', {
    slidesPerView: 2,
    breakpoints: {
        420: { slidesPerView: 2, },
        768: { slidesPerView: 4, },
        1024: { slidesPerView: 5, },
        1200: { slidesPerView: 6, },
    }
});

最小幅から順次設定していくのだと覚える。

動かない場合

こんな感じで作ったとする。

<div class="swiper-slide">...</div>
<div class="swiper-slide">...</div>
<div class="swiper-slide">...</div>
<div class="swiper-slide">...</div>
<div class="swiper-slide">...</div>
<div class="swiper-slide">...</div>

こうしたとする。

const swiperSample = new Swiper('#swiper_sample', {
    slidesPerView: 2,
    breakpoints: {
        420: { slidesPerView: 2, },
        768: { slidesPerView: 4, },
        1024: { slidesPerView: 5, },
        1200: { slidesPerView: 6, },
    }
});

最大幅だと数がぴったりで動かないのはわかる。でも、表示数が多い幅まで狭めても動かない。

原因と解決方法

結局最大数より多くないのが悪い。

上の例だと7個以上で動く。

まとめ

自身のやらかしにより起こったことなんで、ひょっとしたら違うかもしれない。

違ったらごめんなさい。