Swiperでページネーションの番号がとんで抜けてたり、画像もとんで抜けたりしてしまう

実現したいこと

画像を1度に2枚から3枚にすると、
ボタンを押していくとページネーションの番号がとんで抜けてたり、画像もとんで抜けたりしてしまうので、
ボタンを押すと分数の形のページ番号が順番にそして画像も抜けがなく順番に出てくるようにしたいです

前提

ｈｔｍｌ　ｊｓ　ｃｓｓ

質問をしたいことの内容

Swiperで1度に3枚の画像をスライドをしたいのですが
画像ではない1⃣のｈｔｍｌと1⃣のｊｓにしたとき画像がない状態の時と、仮に画像を入れても2枚にしたときは
ページネーションの番号と文字が正常に抜けがなく順番通りに出てくるのですが
画像を入れた2⃣のｈｔｍｌと2⃣のｊｓのように画像を3枚にすると
ナビゲーションのswiper-button-nextを押していくと
ページネーションの番号がとんで抜けてたり、画像もとんで抜けたりします。
1.2.3.4.5.6となるはずが例えば1.3.4.5.6と番号と画像です。
申し訳ございませんが教えていただきたいのですが
よろしくお願いいたします。

html
11⃣ｈｔｍｌ
2  <div class="swiper">
3    <div class="swiper-wrapper">
4      <div class="slide1 swiper-slide">
5        <p>スライド1</p>
6      </div>
7      <div class="slide2 swiper-slide">
8        <p>スライド2</p>
9      </div>
10      <div class="slide3 swiper-slide">
11        <p>スライド3</p>
12      </div>
13      <div class="slide4 swiper-slide">
14        <p>スライド4</p>
15      </div>
16      <div class="slide5 swiper-slide">
17        <p>スライド5</p>
18      </div>
19      <div class="slide6 swiper-slide">
20        <p>スライド6</p>
21      </div>
22    </div>
23    <div class="swiper-pagination"></div>
24    <div class="swiper-button-prev"></div>
25    <div class="swiper-button-next"></div>
26  </div>
27
282⃣ｈｔｍｌ
29      <div class="swiper">
30        <div class="swiper-wrapper">
31          <div class="slide1 swiper-slide">
32            <img src="ここに画像" alt="">
33          </div>
34          <div class="slide2 swiper-slide">
35            <img src="ここに画像" alt="">
36      </div>
37      <div class=" slide3 swiper-slide">
38            <img src="ここに画像" alt="">
39      </div>
40      <div class=" slide4 swiper-slide">
41            <img src="ここに画像" alt="">
42      </div>
43      <div class=" slide5 swiper-slide">
44            <img src="ここに画像" alt="">
45      </div>
46      <div class=" slide6 swiper-slide">
47            <img src="ここに画像" alt="">
48      </div>
49    </div>
50          <div class="swiper-pagination"></div>
51          <div class="swiper-button-prev"></div>
52          <div class="swiper-button-next"></div>
53  </div>

js
11⃣ｊｓ
2    $(function () {
3    var swiper = new Swiper('.swiper', {
4    loop: true,
5    centeredSlides: true, //アクティブなスライドを中央に表示
6    slidesPerView: 2, //スライダーのコンテナ上に2枚同時に表示
7    spaceBetween: 58,
8    },
9
10    navigation: {
11    nextEl: ".swiper-button-next",
12    prevEl: ".swiper-button-prev"
13    },
14
15    pagination: {
16    el: ".swiper-pagination", //
17    type: "fraction",
18    clickable: true,
19    },
20    },
21    });
22    });
23
24
252⃣ｊｓ
26           $(function () {
27          var swiper = new Swiper('.swiper', {
28          loop: true,
29          centeredSlides: true, //アクティブなスライドを中央に表示
30          slidesPerView: 3, //スライダーのコンテナ上に3枚同時に表示
31          spaceBetween: 58,
32          },
33
34          navigation: {
35          nextEl: ".swiper-button-next",
36          prevEl: ".swiper-button-prev"
37         },
38
39          pagination: {
40          el: ".swiper-pagination", //
41          type: "fraction",
42          clickable: true,
43          },
44          },
45          });
46          });

試したこと

サイトを見ながら画像の枚数を2枚や3枚にしたり
画像を入れるときと何も入れないときを試しました。

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

回答1件

ベストアンサー

html

slide3以降、ダブルクォートとクラス名の間に半スペが入っている

閉じ括弧が全体的に合っていない

ここら辺を修正すれば直りそうな気がします。
ソースコードのインデントが揃ってないのも、こういった閉じタグに気づかない一因になるので、無料で優秀なエディターはいくつかあるので、導入してキレイにフォーマットした方が良いですね。
ついでに、ある程度拡張機能も入れてあげれば、間違いを指摘してくれるのでおすすめですよ。

投稿2023/05/07 15:43

退会済みユーザー

総合スコア0

go-da-i-go3

2023/05/08 13:11 編集

ご回答をいただきまして有難うございます。ｈｔｍｌとｊｓを指摘いただいた通りに修正をしました。問題がありましてｈｔｍｌに入れる画像が6枚でしたが本当は5枚にしたいのですが画像が6枚ですとぬけがなくベージも1.2.3.4.5.6と画像が順番通りに表示されましたが画像が5枚にすると番号が1.2.3.5と画像もぬけがでてきてしまいます。試しに7枚では大丈夫でしたが、4枚にすると抜けが出てきました。どの様にすればよいのか教えていただきたいのですがよろしくお願いいたします。ｈｔｍｌ <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide slide1"> <img src="ここに画像を入れる" alt=""> </div> <div class="swiper-slide slide2"> <img src="ここに画像を入れる" alt=""> </div> <div class="swiper-slide slide3"> <img src="ここに画像を入れる" alt=""> </div> <div class="swiper-slide slide4"> <img src="ここに画像を入れる" alt=""> </div> <div class="swiper-slide slide5"> <img src="ここに画像を入れる" alt=""> </div> <div class="swiper-slide slide5"> <img src="ここに画像を入れる" alt=""> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> ｊｓ <js> $(function () { var swiper = new Swiper('.swiper', { loop: true, slidesPerView: 3, spaceBetween: 58, pagination: { el: '.swiper-pagination', type: 'fraction', }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); });

退会済みユーザー

2023/05/09 05:23 編集

どうやら、最新ver9だと loopがtrueの時 slidesPerViewで指定される値の2倍ないといけないという仕様のようなので、6枚以上だと期待値で動作しているようです。公式：https://swiperjs.com/migration-guide-v9 なので、実現するとしたら、バージョンを落として上げるか、slidesPerViewを2にする、が結論になりそうです。バージョンアップされて仕様が変わることはよくありるので、公式を確認するのは大事ですね。私も改めて勉強になりました。あと、 $(function () {});　で囲ってますけど jQuery 依存ではないので、いらないかと。

go-da-i-go3

2023/05/09 11:52 編集

スワイパーのｈｔｍｌの読み込みのバージョンを最新の9から7にしましたら正常に動くようになりました。どうも有難うございます。 $(function () {});はとるようにします。とても助かりました。

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