Swiperをループさせた時にループされず、空白が表示されるのを修正したいです。

Question

実現したいこと

Wordpressサイトで記事をSwiperでループ表示させたいです。
下記サイトと全く同じ形での実装を希望しています。
実装イメージ：ZOZO TOWNのファーストビュー(スライドバナー箇所)
https://zozo.jp/

記事数が足りない(5記事以上無い)カテゴリであっても、重複表示して
ZOZO TOWNのようにPC表示時、0.5 / 1 / 1 / 1 / 0.5のような表示になるよう
ループ処理がしたいです。
(もちろん、記事数が足りているカテゴリは、ZOZO TOWNのように表示させたいです。）

SP用のCSSはループが出来ていないので、まだ作成しておりませんが、
SP時は1記事のみ表示される形にしたいです。(実装イメージ：ZOZO TOWN)

お手数をお掛けいたしますが、どうぞよろしくお願い致します。

発生している問題・分からないこと

ループ処理を行ってもループしない、もしくは、ループしても空白が表示されるのみになっています。
（過去質問、chatGPTを駆使して修正を行ってまいりましたが、現在はループすらしない形になってしまいました。）
script部分の設定が間違っているのでしょうか...？

該当のソースコード

<div class="campaign_wrapper">
    <div class="swiper">
        <div class="swiper-wrapper">
            <?php
                $args = array(
                'post_type' => 'campaign',
                'showposts' => 3,
                'posts_per_page' => 3,
                );
                $query = new WP_Query($args);
                if ($query->have_posts()) {
                while ($query->have_posts()) {
                    $query->the_post();
            ?>
            <div class="swiper-slide">
                <a href="<?php the_permalink(); ?>" class="swiper-slide-link">
                    <div class="swiper-slide_campaign">
                        <?php $field = SCF::get('back_img'); ?>
                        <?php if ($field): ?>
                        <img src="<?php echo esc_url(wp_get_attachment_url($field)); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
                        <?php endif; ?>
                        <div class="campaign_textarea">
                            <p class="campaign_headtitle"><?php the_title(); ?></p>
                            <p class="campaign_headtext"><?php echo SCF::get('cam_text'); ?></p>
                        </div>
                    </div>
                </a>
            </div>
            <?php
                }
            }
            // wp_reset_query();
            wp_reset_postdata();
            ?>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const swiper = new Swiper('.swiper', {
    loop: true,
    slidesPerView: 1.5,        // 画面幅に応じて調整するならbreakpointsでもOK
    spaceBetween: 20,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    breakpoints: {
      320: {
        slidesPerView: 1.5,
      },
      800: {
        slidesPerView: 3,
      }
    }
  });
});
</script>

.swiper-slide {
    height: 300px;
    flex-shrink: 0;
    position: relative;
    margin-right: 30px;
}
.swiper-slide_campaign  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.swiper-slide_campaign .campaign_textarea{
    position: absolute;
    bottom: 0%;
    width: 92%;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 4%;
}
.swiper-slide_campaign .campaign_textarea .campaign_headtitle{
    font-size: 24px;
    font-weight: bold;
    color: white;
}
.swiper-slide_campaign .campaign_textarea .campaign_headtext{
    font-size: 14px;
    color: white;
}
.swiper-button-next,
.swiper-button-prev {
  display: none !important;
}

ヘッダー部分のリンク先は下記のとおりです。
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

過去質問の回答のソースコードをコピペし、使用しましたが改善されませんでした。
chatgptで解決を試みましたが、スライドしないようになってしまいました。(現在のコード)

補足

その他必要な情報がございましたら、質問にてご連絡いただければ用意させて頂きます。
どうぞよろしくお願いします。

Comments

[jimbe]

java と javascript は関係無い言語です。 java のタグは外されたほうが良いと思います。

[Lhankor_Mhy]

2点補足願います。

1.『記事数が足りない(5記事以上無い)カテゴリ』とありますが、コードには 'posts_per_page' => 3, とあるようでした。おそらく常に5記事ない状態になるのではないかと思うのですが、これは問題ありませんか？

2.『ZOZO TOWNのようにPC表示時、0.5 / 1 / 1 / 1 / 0.5のような表示になるよう』とのことですが、スクリプトに slidesPerView: 3, とあり、3件しか表示されないと思うのですが、これは問題ありませんか？

[gelsea]

jimbe様

修正いたしました。
ご指摘ありがとうございます。

[gelsea]

Lhankor_Mhy様

1.こちらはループは動作しているが、ループ後が空白になった際に
「表示する記事数より実際の記事数が少ないため、起こったのか？」と考え、
5から3に変更し、ループ状態を確認したたままになっておりました。申し訳ありません。
実装したいのは5記事にになります。

2.こちらは、chatgptで修正を何度もかけた際に変更になったと思われます。
0.5 / 1 / 1 / 1 / 0.5の表示の場合、適切なslidesperviewの数も分かっておりませんので、
ご教授いただければ幸いでございます。

どうぞよろしくお願いいたします。

[jimbe]

編集ありがとうございます

Answer 1

おそらく、以下の警告が出ているかと思います。

Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled or not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters

メッセージの通り、スライドを複製して枚数を増やすのがいいかと思います。

Comments

[gelsea]

回答ありがとうございます。
警告はどこで確認すれば良いのでしょうか・・・。
やはり、記事数が足りないカテゴリについてはループが出来ないという事でしょうか・・・。
ご回答ありがとうございます。

[Lhankor_Mhy]

警告は、ブラウザのdevtoolのコンソールに出ているのではないかと思います。