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

実現したいこと

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部分の設定が間違っているのでしょうか...？

該当のソースコード

PHP
1<div class="campaign_wrapper">
2    <div class="swiper">
3        <div class="swiper-wrapper">
4            <?php
5                $args = array(
6                'post_type' => 'campaign',
7                'showposts' => 3,
8                'posts_per_page' => 3,
9                );
10                $query = new WP_Query($args);
11                if ($query->have_posts()) {
12                while ($query->have_posts()) {
13                    $query->the_post();
14            ?>
15            <div class="swiper-slide">
16                <a href="<?php the_permalink(); ?>" class="swiper-slide-link">
17                    <div class="swiper-slide_campaign">
18                        <?php $field = SCF::get('back_img'); ?>
19                        <?php if ($field): ?>
20                        <img src="<?php echo esc_url(wp_get_attachment_url($field)); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
21                        <?php endif; ?>
22                        <div class="campaign_textarea">
23                            <p class="campaign_headtitle"><?php the_title(); ?></p>
24                            <p class="campaign_headtext"><?php echo SCF::get('cam_text'); ?></p>
25                        </div>
26                    </div>
27                </a>
28            </div>
29            <?php
30                }
31            }
32            // wp_reset_query();
33            wp_reset_postdata();
34            ?>
35        </div>
36        <div class="swiper-pagination"></div>
37    </div>
38</div>
39<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
40<script>
41document.addEventListener('DOMContentLoaded', function () {
42  const swiper = new Swiper('.swiper', {
43    loop: true,
44    slidesPerView: 1.5,        // 画面幅に応じて調整するならbreakpointsでもOK
45    spaceBetween: 20,
46    pagination: {
47      el: '.swiper-pagination',
48      clickable: true,
49    },
50    autoplay: {
51      delay: 3000,
52      disableOnInteraction: false,
53    },
54    breakpoints: {
55      320: {
56        slidesPerView: 1.5,
57      },
58      800: {
59        slidesPerView: 3,
60      }
61    }
62  });
63});
64</script>
65

CSS
1.swiper-slide {
2    height: 300px;
3    flex-shrink: 0;
4    position: relative;
5    margin-right: 30px;
6}
7.swiper-slide_campaign  img{
8    width: 100%;
9    height: 100%;
10    object-fit: cover;
11    display: block;
12}
13.swiper-slide_campaign .campaign_textarea{
14    position: absolute;
15    bottom: 0%;
16    width: 92%;
17    background-color: rgba(0, 0, 0, 0.6);
18    padding: 4%;
19}
20.swiper-slide_campaign .campaign_textarea .campaign_headtitle{
21    font-size: 24px;
22    font-weight: bold;
23    color: white;
24}
25.swiper-slide_campaign .campaign_textarea .campaign_headtext{
26    font-size: 14px;
27    color: white;
28}
29.swiper-button-next,
30.swiper-button-prev {
31  display: none !important;
32}
33

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

試したこと・調べたこと

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

上記の詳細・結果

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

補足

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

jimbe

2025/07/08 15:34

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

Lhankor_Mhy

2025/07/09 01:00

2点補足願います。 1.『記事数が足りない(5記事以上無い)カテゴリ』とありますが、コードには 'posts_per_page' => 3, とあるようでした。おそらく常に5記事ない状態になるのではないかと思うのですが、これは問題ありませんか？ 2.『ZOZO TOWNのようにPC表示時、0.5 / 1 / 1 / 1 / 0.5のような表示になるよう』とのことですが、スクリプトに slidesPerView: 3, とあり、3件しか表示されないと思うのですが、これは問題ありませんか？

gelsea

2025/07/09 01:49

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

gelsea

2025/07/09 01:54

Lhankor_Mhy様 1.こちらはループは動作しているが、ループ後が空白になった際に「表示する記事数より実際の記事数が少ないため、起こったのか？」と考え、 5から3に変更し、ループ状態を確認したたままになっておりました。申し訳ありません。実装したいのは5記事にになります。 2.こちらは、chatgptで修正を何度もかけた際に変更になったと思われます。 0.5 / 1 / 1 / 1 / 0.5の表示の場合、適切なslidesperviewの数も分かっておりませんので、ご教授いただければ幸いでございます。どうぞよろしくお願いいたします。

jimbe

2025/07/09 12:41

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

行動規範の内容に同意します

回答2件

参照サイトでブラウザサイズを伸縮してみれば分かるのですが、固定サイズを並べてブラウザサイズのなりゆきで端を切っています。
ですので「0.5 / 1 / 1 / 1 / 0.5」のような比率は指定していません。

ポイントは３つ。
・パラメータ「slidesPerView」は「auto」（スタイル指定）
・パラメータ「enteredSlides」をtrueに。
・「swiper-slide」クラスに幅指定
簡単なサンプルを書きましたので参考にしてみてください。

あと他の方が仰られているように、初期のスライド数が少ないと端が見切れたりエラーが出ることがあります。
参照記事数を増やすなり、ループを複製するなりして多めに用意しておいたほうが良いです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7<link
8  rel="stylesheet"
9  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
10/>
11</head>
12<body>
13  <main>
14
15    <div class="container">
16      <div class="swiper">
17        <div class="swiper-wrapper">
18          <div class="swiper-slide">
19            <span>img-01</span>
20          </div>
21          <div class="swiper-slide">
22            <span>img-02</span>
23          </div>
24          <div class="swiper-slide">
25            <span>img-03</span>
26          </div>
27          <div class="swiper-slide">
28            <span>img-04</span>
29          </div>
30          <div class="swiper-slide">
31            <span>img-05</span>
32          </div>
33          <div class="swiper-slide">
34            <span>img-06</span>
35          </div>
36          <div class="swiper-slide">
37            <span>img-07</span>
38          </div>
39          <div class="swiper-slide">
40            <span>img-08</span>
41          </div>
42          <div class="swiper-slide">
43            <span>img-09</span>
44          </div>
45          <div class="swiper-slide">
46            <span>img-10</span>
47          </div>
48          <div class="swiper-slide">
49            <span>img-11</span>
50          </div>
51          <div class="swiper-slide">
52            <span>img-12</span>
53          </div>
54        </div>
55      </div>
56    </div>
57  </main>
58
59<style>
60  body{
61    margin: 0;
62    padding: 60px 0;
63  }
64  
65  .swiper-slide{
66    background-color: #ccc;
67    width: 300px;
68    height: 200px;
69  }
70</style>
71<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
72<script>
73document.addEventListener('DOMContentLoaded', function () {
74  const swiper = new Swiper('.swiper', {
75    centeredSlides: true,
76    loop: true,
77    spaceBetween: 20,
78    pagination: {
79      el: '.swiper-pagination',
80      clickable: true,
81    },
82    autoplay: {
83      delay: 3000,
84      disableOnInteraction: false,
85    },
86    breakpoints: {
87      320: {
88        slidesPerView: 1.5,
89      },
90      800: {
91        slidesPerView: 'auto',
92      }
93    }
94  });
95});
96</script>
97</body>
98</html>

投稿2025/07/14 05:49

kchiku

総合スコア170

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

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

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

投稿2025/07/09 02:06

Lhankor_Mhy

総合スコア37528