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修理中につき戻りましたら、ご報告いたします。

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

回答1件

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

投稿2025/09/04 03:15

kei344

総合スコア69636

nakatoshicraft

2025/09/06 05:16

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

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