[Q&A] Swiperで、３枚目の画像が表示されなくなってしまう

Swiperで、３枚目の画像が表示されなくなってしまう

解決したいこと

Swiperのloop:trueを使用し、６枚の画像を連続で表示させたいと思っております。しかし実装してみると、３枚目の画像がなぜか表示されなくなってしまいます。（下記画像の青い丸で囲った部分です）

コードは下記のように記載しております。

HTML

 <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/img/index_img_insta_03.png"></div>
                    <div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/img/index_img_insta_04.png"></div>
                    <div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/img/index_img_insta_05.png"></div>
                    <div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/img/index_img_insta_06.png"></div>
                    <div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/img/index_img_insta_07.png"></div>
                    <div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/img/index_img_insta_08.png"></div>
                </div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>

CSS


    .swiper {
        width: 100%;
        height: 400px;
    }
    
    img {
        max-width: auto !important;
        width: auto !important;
        height: 400px;
        object-fit: cover;
    }

$(function () {
  const swiper = new Swiper('.swiper', {
    slidesPerView:3.5,
    loop:true,
    centeredSlides:true,
  
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

  });

});

自分で試したこと

loop:true,を消して、 centeredSlidesBounds: true,を代わりに設定。そうすることで最初と最後のスライダが空白にならないようにしようと試みました。

しかし今度は、 centeredSlides:true,が効かなくなったのか？最初のスライドがセンターにならなくなってしまいまいました。加えて、slidesPerView:3.5,の両端の見切れ表示も無効になっているようです。（下記画像参照）

コードは下記のように変更しました。
（html、cssの変更はありません）
js

$(function () {
  const swiper = new Swiper('.swiper', {
    slidesPerView:3.5,
    centeredSlides:true,
    centeredSlidesBounds: true,

    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

  });

});

参考にしたサイト

コーディング初心者のため、分かりづらい上に初歩的な質問となってしまい申し訳ありません。
どなたか、ご教示いただけますと大変ありがたく存じます。
どうぞよろしくお願いいたします。m(__)m

1Answer

@STSynthe posted at 2023-04-25

参考にされているサイトでのSwiperはバージョン8ですが、ここでは9で対応します。

ひとつはCSSに原因があります。

imgタグはインラインですのでCSSでwidthやheightを指定しても効果はありません。あとauto値は初期値なので強制してもほぼ意味はありません。ブロック要素に直す必要があります。

画像サイズなどにバラツキがある場合、コレが原因で余白が出来ますから縦横100%に直すことでobject-fit: cover;が生きてくるかと思います。

もうひとつはSwiperのパラメーター指定に原因があります。
公式のドキュメントをよく確認してください。そこにヒントがあります。

Because of nature of how the loop mode works (it will rearrange slides), total number of slides must be >= slidesPerView * 2

とあります。パラメーターloop: trueを使用する場合、要素数 >= slidesPerView * 2の条件でないと正常に表示されないとあります。

質問にあるHTMLで.swiper-slideを付与した要素数は6個あります。slidesPerViewで3.5を指定してますが6 >= (3.5 * 2)では条件に合わず、表示が乱れている原因のもう一つがコレです。

Comments

@takopitto
Questioner
@STSynthe様

お礼が遅くなってしまいましたm(__)m
ご丁寧に回答いただきまして、誠にありがとうございます！

まずはimgについてご教示いただいたことで、改めて基礎から見直す必要があることに気が付きました(;_:)今後は公式サイトをしっかり確認しながら、勉強し直したいと思います。

また、swiperについても本当に分かりやすく、的確なご指示をありがとうございました。
そのような注意書きがあったなんて…目から鱗でした。
やはり、最初にやらなければならないのは公式サイトの確認ですね(>_<)

ご丁寧な回答に、改めて感謝申し上げます(*^^)
今後もどうぞよろしくお願いいたします。