Swiperを複数、Wordpressの１ページ内で動かしたい

実現したいこと

Wordpress 1ページ内で複数（３つ）のSwiperを稼働させたい。

前提

HTML CSS　で組んだ静的ページでは３つとも正常に稼働しています。
Wordpress化に移行してみると、１つ目は稼働するのですが、２つ目３つ目は現れません。

発生している問題・エラーメッセージ

検証ツールには、swiper関連のエラーは出ていません

１つ目は稼働しているので、function.phpと.js に於いてSwiper自体は読み込めていると思いますので、２つ目３つ目の書き方が不足しているのだと思っています。

該当のソースコード

PHP
1function.php　に以下
2
3//スワイパー読み込み
4function my_script_init()
5{
6    wp_enqueue_script('swiper', '//unpkg.com/swiper@8/swiper-bundle.min.js', "", "1.0.1", true);
7
8//その他色々
9
10 wp_enqueue_style('style-css', get_template_directory_uri() . '/css/style.css', array(), '1.0.1');
11
12    wp_enqueue_script('main-js', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.1', true);
13
14}
15add_action('wp_enqueue_scripts', 'my_script_init');
16
17
18
19front-page.php　には以下
20//スライダー１つ目
21<div class="main-mv__slider swiper">
22            <div class="swiper-wrapper">
23
24              <div class="swiper-slide">
25                <img src="<?php echo esc_url(get_theme_file_uri("/images/fv01.jpg")); ?>" alt="">
26              </div>
27              <div class="swiper-slide">
28                <img src="<?php echo esc_url(get_theme_file_uri("/images/fv02.jpg")); ?>" alt="">
29              </div>
30
31          </div>
32        </div>
33
34//スライダー２つ目
35<div class="slider">
36      <div class="slider__inner">
37        <div class="slider__slider swiper1">
38          <div class="swiper-wrapper">
39
40            <div class="swiper-slide">
41              <img src="<?php echo esc_url(get_theme_file_uri("/images/slide01.jpg")); ?>" class="slide01-img" alt="">
42            </div>
43            <div class="swiper-slide">
44              <img src="<?php echo esc_url(get_theme_file_uri("/images/slide02.jpg")); ?>" class="slide02-img" alt="">
45            </div>
46            <div class="swiper-slide">
47              <img src="<?php echo esc_url(get_theme_file_uri("/images/slide03.jpg")); ?>" class="slide03-img" alt="">
48            </div>
49
50          </div>
51        </div>
52      </div>
53    </div>
54
55
56//スライダー３つ目
57<div class="member-slide">
58          <div class="member__slide--inner">
59            <div class="member__slider swiper2">
60              <div class="swiper-wrapper">
61
62               
63                <div class="swiper-slide">
64                  <div class="member__card">
65                    <img src="<?php echo esc_url(get_theme_file_uri("/images/face01.jpg")); ?>" class=“face01” alt="">
66                    <div class="member__message">◯◯</div>
67                    <div class="member__name">◯◯</div>
68                  </div>
69                </div>
70<div class="swiper-slide">
71                  <div class="member__card">
72                    <img src="<?php echo esc_url(get_theme_file_uri("/images/face02.jpg")); ?>" class=“face02” alt="">
73                    <div class="member__message">◯◯</div>
74                    <div class="member__name">◯◯</div>
75                  </div>
76                </div>
77<div class="swiper-slide">
78                  <div class="member__card">
79                    <img src="<?php echo esc_url(get_theme_file_uri("/images/face03.jpg")); ?>" class=“face03” alt="">
80                    <div class="member__message">◯◯</div>
81                    <div class="member__name">◯◯</div>
82                  </div>
83                </div>
84
85              </div>
86            </div>
87          </div>
88        </div>
89

JS
1$(function () {
2
3//スライダー
4const swiper = new Swiper(".swiper", {
5  direction: 'vertical',
6  loop: true,
7  effect: "fade",
8  speed: 3000,
9  allowTouchMove: true,
10  autoplay: {
11    delay: 3000,
12  },
13});
14
15//スライダー1
16const swiper1 = new Swiper(".swiper1", {
17  direction: 'horizontal',
18  loop: true,
19  effect: "slide",
20  speed: 3000,
21  allowTouchMove: true,
22  spaceBetween: 34,
23  autoplay: {
24    delay: 0,
25  },
26});
27
28//スライダー2
29const swiper2 = new Swiper(".swiper2", {
30  direction: 'horizontal',
31  loop: true,
32  effect: "slide",
33  speed: 3000,
34  allowTouchMove: true,
35  spaceBetween: 43,
36  autoplay: {
37    delay: 0,
38  },
39});
40

CSS
1.main-mv__slider,
2.swiper-slide img {
3  aspect-ratio: 1440/823;
4  width: 100%;
5  height: auto;
6}
7@media screen and (max-width: 768px) {
8  .main-mv__slider,
9.swiper-slide img {
10    width: 100%;
11    height: 667px;
12  }
13}
14
15.swiper-slide img {
16     object-fit: cover;
17}
18
19.swiper {
20  margin-left: auto;
21  margin-right: auto;
22  overflow: hidden;
23  list-style: none;
24  padding: 0;
25  z-index: 1;
26}
27
28
29//スライダー１に当たる部分
30
31.slider {
32  width: 100%;
33  height: 440px;
34  margin-top: 101px;
35  position: relative;
36}
37@media screen and (max-width: 768px) {
38  .slider {
39    height: 270px;
40    margin-top: 41px;
41  }
42}
43
44.slider__inner {
45  display: flex;
46  position: relative;
47  width: 100%;
48  height: inherit;
49     object-fit: cover;
50  overflow: hidden;
51}
52@media screen and (max-width: 768px) {
53  .slider__inner {
54    height: inherit;
55  }
56}
57
58.slider__slider,
59.swiper1-slide img {
60  aspect-ratio: 506/393;
61  width: 506px;
62  height: 393px;
63}
64@media screen and (max-width: 768px) {
65  .slider__slider,
66.swiper1-slide img {
67    width: 271px;
68    height: 210px;
69  }
70}
71
72.swiper-slide img {
73  height: 100%;
74  width: 100%;
75     object-fit: cover;
76}
77
78.slide01-img {
79  height: 393px;
80  width: 506px;
81  border-radius: 60px;
82     object-fit: cover;
83}
84@media screen and (max-width: 768px) {
85  .slide01-img {
86    height: 211px;
87    width: 271px;
88  }
89}
90
91.slide02-img {
92  height: 393px;
93  width: 506px;
94  border-radius: 60px;
95  margin-top: 36px;
96     object-fit: cover;
97}
98@media screen and (max-width: 768px) {
99  .slide02-img {
100    height: 211px;
101    width: 271px;
102  }
103}
104
105.slide03-img {
106  height: 393px;
107  width: 506px;
108  border-radius: 60px;
109     object-fit: cover;
110}
111@media screen and (max-width: 768px) {
112  .slide03-img {
113    height: 211px;
114    width: 271px;
115  }
116}
117
118.swiper {
119  margin-left: auto;
120  margin-right: auto;
121  position: relative;
122  overflow: hidden;
123  list-style: none;
124  padding: 0;
125  z-index: 1;
126}
127
128.swiper-wrapper {
129  transition-timing-function: linear;
130}
131
132
133//スライダー２に当たる部分
134
135.member__slider,
136.swiper2-slide img {
137  aspect-ratio: 379/300;
138  width: 300px;
139  height: 379px;
140}
141@media screen and (max-width: 768px) {
142  .member__slider,
143.swiper2-slide img {
144    width: 246px;
145    height: 311px;
146  }
147}
148
149.member__slide--inner {
150  display: flex;
151  width: 100%;
152  height: inherit;
153     object-fit: cover;
154  overflow: hidden;
155}
156@media screen and (max-width: 768px) {
157  .member__slide--inner {
158    height: inherit;
159    margin-top: 50px;
160  }
161}
162
163.member__slider,
164.swiper2-slide img {
165  aspect-ratio: 379/300;
166  width: 300px;
167  height: 379px;
168}
169@media screen and (max-width: 768px) {
170  .member__slider,
171.swiper2-slide img {
172    width: 246px;
173    height: 311px;
174  }
175}
176
177.swiper-slide .member__card {
178  height: 100%;
179  width: 100%;
180  object-fit: cover;
181}
182
183.swiper {
184  margin-left: auto;
185  margin-right: auto;
186  position: relative;
187  overflow: hidden;
188  list-style: none;
189  padding: 0;
190  z-index: 1;
191}
192
193.swiper-wrapper {
194  transition-timing-function: linear;
195}
196

試したこと

ある記事で、jsを個別にすると良いとのことで、swiper２つ目３つ目を(function()~をつけて別に書きだして、（もちろん const から始まる部分は消して両立しないようにしております）などをやってみたのですが残念ながらうまくいきませんでした。
ただ変化としては、(function()~をつけて書き出してみるとinnerのhight幅内で画像（とテキスト）が現れますが、swiperが稼働しません。

補足情報（FW/ツールのバージョンなど）

おそらく、Swiperの HTML JS CSS　のどれを元のままにして、複数を区別するためにどこに加筆して差別化するのか、そのことがわかっていないのだと思います。そのあたりご指示くださいませ。
お力をお貸しただけますと幸甚でございます。お助けください。何卒よろしくお願いいたします。

hiroki-o

2025/09/02 13:24

まだ調べていないですが、Swiper 8は3年くらい前のバージョンですが、8でないとダメでしょうか？ (最新は11)

nakatoshicraft

2025/09/03 04:20

コメントありがとうございます。バージョン８でないとダメ、ではございません。調べた見本からそのまま使用して、静的サイトでは動いていたのでそのままにしていました。 11にしてみますと、 heightの高さ幅内で、swiper-slideで囲んだ要素が、縦に並んで一瞬現れて左にスライド移動して見えなくなって、あと何も起こらず真っ白状態。ということが、再読み込みすると繰り返される。という状況になりました。バージョンを変えたことで変化はありましたが、正常稼働には至りませんでした。気づきをいただきましてありがとうございます。感謝申し上げます。

nakatoshicraft

2025/09/05 04:56

kei344様ご回答ありがとうございます。今、PC修理中につき戻りましたら、ご報告いたします。

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

回答2件

自己解決

ご閲覧、ご回答、いただきまして恐れ入ります。
結局、一つが稼働していたことに目を奪われて、head内の設定CSSを書いていないという誠に低次元の見落としがございまして、その加筆とCSSの修正を繰り返すことで結果、動かすことができました。
ですが、２つ目のswiperに於きましては、永続ループが途切れる症状が未解決でして、それを引き続き探求してまいります。
ひとまずは、３つのswiperをそれぞれ別の動きで同時に稼働させることはできましたので、一旦自己解決といたします。

該当のソースコード

PHP
1function.php　に以下
2
3//スワイパー読み込み
4function my_script_init()
5{
6    wp_enqueue_script('swiper', '//unpkg.com/swiper@8/swiper-bundle.min.js', "", "1.0.1", true);
7
8
9//☆☆この行を入れ忘れていました
10    wp_enqueue_style('swiper', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
11
12
13
14
15//その他色々
16
17 wp_enqueue_style('style-css', get_template_directory_uri() . '/css/style.css', array(), '1.0.1');
18
19 wp_enqueue_script('main-js', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.1', true);
20
21}
22add_action('wp_enqueue_scripts', 'my_script_init');
23
24
25
26front-page.php　には以下
27//スライダー１つ目
28<div class="main-mv__slider swiper1”>
29            <div class="swiper-wrapper">
30
31              <div class="swiper-slide">
32                <img src="<?php echo esc_url(get_theme_file_uri("/images/fv01.jpg")); ?>" alt="">
33              </div>
34              <div class="swiper-slide">
35                <img src="<?php echo esc_url(get_theme_file_uri("/images/fv02.jpg")); ?>" alt="">
36              </div>
37
38          </div>
39        </div>
40
41//スライダー２つ目
42<div class="slider">
43      <div class="slider__inner">
44        <div class="slider__slider">
45          <div class="swiper2">
46          <div class="swiper-wrapper">
47
48            <div class="swiper-slide">
49              <img src="<?php echo esc_url(get_theme_file_uri("/images/slide01.jpg")); ?>" class="slide01-img" alt="">
50            </div>
51            <div class="swiper-slide">
52              <img src="<?php echo esc_url(get_theme_file_uri("/images/slide02.jpg")); ?>" class="slide02-img" alt="">
53            </div>
54            <div class="swiper-slide">
55              <img src="<?php echo esc_url(get_theme_file_uri("/images/slide03.jpg")); ?>" class="slide03-img" alt="">
56            </div>
57
58          </div>
59        </div>
60      </div>
61    </div>
62
63
64//スライダー３つ目
65<div class="member-slide">
66          <div class="member__slide--inner">
67            <div class="member__slider">
68              <div class="swiper3">
69                <div class="swiper-wrapper">
70                <?php
71                  $args = [
72                    "post_type" => "staff",
73                    "posts_per_page" => 6
74                  ];
75                  $the_query = new WP_Query($args);
76                  ?>
77                  <?php if ($the_query->have_posts()) : ?>
78                    <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
79                      <div class="swiper-slide">
80                        <div class="member__card">
81                          <a href="<?php the_permalink(); ?>" class="">
82                            <div class=“member-img”>
83                              <?php if (has_post_thumbnail()) : ?>
84                                <?php the_post_thumbnail('full', ['class' => 'member-img']); ?>
85                              <?php else : ?>
86                                <img class="" src="<?php echo esc_url(get_theme_file_uri("/images/noimage.jpg")); ?>)" alt="NoImage画像" />
87                              <?php endif; ?>
88                            </div>
89                            <div class="member__message1"><?php the_field('member__message'); ?></div>
90                            <div class="member__name"><?php the_field('member__name'); ?></div>
91                           </a>
92                        </div>
93                      </div>
94                    <?php endwhile; ?>
95                    <?php wp_reset_postdata(); ?>
96                  <?php else : ?>
97                    <p>記事が投稿されていません</p>
98                  <?php endif; ?>
99              </div>
100            </div>
101          </div>
102        </div>
103

JS
1$(function () {
2
3//スライダー1
4const swiper1 = new Swiper(".swiper1", {
5  direction: 'vertical',
6  loop: true,
7  effect: "fade",
8  speed: 3000,
9  allowTouchMove: true,
10  autoplay: {
11    delay: 3000,
12  },
13});
14
15//スライダー2
16const swiper2 = new Swiper(".swiper2", {
17  direction: 'horizontal',
18  loop: true,
19  effect: "slide",
20  speed: 3000,
21  allowTouchMove: true,
22  spaceBetween: 34,
23  autoplay: {
24    delay: 0,
25  },
26});
27
28//スライダー3
29const swiper3 = new Swiper(".swiper3", {
30  direction: 'horizontal',
31  loop: true,
32  effect: "slide",
33  speed: 3000,
34  allowTouchMove: true,
35  spaceBetween: 43,
36  autoplay: {
37    delay: 0,
38  },
39});
40

CSS
1//スライダー1に当たる部分
2.main-mv__slider,
3.swiper1-slide img {
4  aspect-ratio: 1440/823;
5  width: 100%;
6  height: auto;
7}
8@media screen and (max-width: 768px) {
9  .main-mv__slider,
10.swiper-slide img {
11    width: 100%;
12    height: 667px;
13  }
14}
15
16.swiper1-slide img {
17     object-fit: cover;
18}
19
20.swiper {
21  margin-left: auto;
22  margin-right: auto;
23  overflow: hidden;
24  list-style: none;
25  padding: 0;
26  z-index: 1;
27}
28
29
30//スライダー2に当たる部分
31
32.slider {
33  width: 100%;
34  height: 440px;
35  margin-top: 101px;
36  position: relative;
37}
38@media screen and (max-width: 768px) {
39  .slider {
40    height: 270px;
41    margin-top: 41px;
42  }
43}
44
45.slider__inner {
46  display: flex;
47  position: relative;
48  width: 100%;
49  height: inherit;
50     object-fit: cover;
51  overflow: hidden;
52}
53@media screen and (max-width: 768px) {
54  .slider__inner {
55    height: inherit;
56  }
57}
58
59.slider__slider,
60.swiper2-slide img {
61  aspect-ratio: 506/393;
62  width: 506px;
63  height: 393px;
64}
65@media screen and (max-width: 768px) {
66  .slider__slider,
67.swiper2-slide img {
68    width: 271px;
69    height: 210px;
70  }
71}
72
73.swiper-slide img {
74  height: 100%;
75  width: 100%;
76     object-fit: cover;
77}
78
79.slide01-img {
80  height: 393px;
81  width: 506px;
82  border-radius: 60px;
83     object-fit: cover;
84}
85@media screen and (max-width: 768px) {
86  .slide01-img {
87    height: 211px;
88    width: 271px;
89  }
90}
91
92.slide02-img {
93  height: 393px;
94  width: 506px;
95  border-radius: 60px;
96  margin-top: 36px;
97     object-fit: cover;
98}
99@media screen and (max-width: 768px) {
100  .slide02-img {
101    height: 211px;
102    width: 271px;
103  }
104}
105
106.slide03-img {
107  height: 393px;
108  width: 506px;
109  border-radius: 60px;
110     object-fit: cover;
111}
112@media screen and (max-width: 768px) {
113  .slide03-img {
114    height: 211px;
115    width: 271px;
116  }
117}
118
119.swiper {
120  margin-left: auto;
121  margin-right: auto;
122  position: relative;
123  overflow: hidden;
124  list-style: none;
125  padding: 0;
126  z-index: 1;
127}
128
129.swiper-wrapper {
130  transition-timing-function: linear;
131}
132
133
134//スライダー3に当たる部分
135
136.member__slide--inner {
137  display: flex;
138  width: 100%;
139  height: inherit;
140     object-fit: cover;
141  overflow: hidden;
142}
143@media screen and (max-width: 768px) {
144  .member__slide--inner {
145    height: inherit;
146  }
147}
148
149.member__slider,
150.swiper3-slide img {
151  aspect-ratio: 379/300;
152  width: 300px;
153  height: 379px;
154}
155@media screen and (max-width: 768px) {
156  .member__slider,
157.swiper3-slide img {
158    width: 246px;
159    height: 311px;
160  }
161}
162
163.swiper-slide .member__card {
164  height: 100%;
165  width: 100%;
166  object-fit: cover;
167}
168
169.member-img {
170  height: 379px;
171  width: 300px;
172  border-radius: 30px;
173  //object-fit: cover;
174
175  @include mq("md") {
176    height: 311px;
177    width: 246px;
178  }
179}
180
181
182.swiper {
183  margin-left: auto;
184  margin-right: auto;
185  position: relative;
186  overflow: hidden;
187  list-style: none;
188  padding: 0;
189  z-index: 1;
190}
191
192.swiper-wrapper {
193  transition-timing-function: linear;
194}

投稿2025/09/17 12:21

nakatoshicraft

総合スコア2

slider__slider swiper1->slider__slider swiper swiper1
member__slider swiper2->member__slider swiper swiper2
にすれば出ませんか？

投稿2025/09/04 03:15

kei344

総合スコア69643

nakatoshicraft

2025/09/06 05:16

この度はご回答をありがとうございます。ご指示いただきました通り、swiper を加筆してみたのですが、結果うまくいきませんでした。一瞬あらわれて左に流れていって、それで終わってしまう、という状況です。その消える場所を(検証ツール)で見てみると、 .slider__slider, .swiper1-slide img { aspect-ratio: 506/393; width: 506px; height: 393px; } の幅が横中央に指定されていて、そこの左端から消えてしまうという状況で、 .slider__sliderがここにあることでその指定した幅が反映してしまっているようなので、スライド自体を画面幅で稼働させるにはそのあたりも解消しないといけないようです。これも修正しなければならない一点ということであるということで、ググりつつ組んだ静的サイトでは順調に稼働していたものが、Wordpressへの移植をした途端になぜ動かなくなるのか・・　ということに意識が引っ張られていると時間を無駄にしてしまうということ、のようにも思えてまいりました Wordpressへの移植の注意点など、様々にもう一度検証しつつ修正点を見ていこうと思います。ご回答に感謝いたしております、もしできましたら引き続きよろしくお願い申し上げます。ありがとうございます。

nakatoshicraft

2025/09/28 04:12

結論 <div class="slider"> <div class="slider__slider"> <div class="swiper swiper2"> <div class="swiper-wrapper"> とし、それぞれにCSSを当てることで解決しました。ヒントを頂きありがとうございます。

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

あなたの回答