Swiperで1度に3枚の画像をスライドをしたいです

実現したいこと

Swiperで1度に3枚の画像をスライドをしたいです。

前提

html js css

質問をしたいことの内容

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

html

11⃣html 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⃣html 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">51 </div>52 <div class="swiper-button-prev"></div>53 <div class="swiper-button-next"></div>54 </div>

js

11⃣js 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⃣js 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"**[ボールドテキスト](url)**37 },38 39 pagination: {40 el: ".swiper-pagination", //41 type: "fraction",42 clickable: true,43 },44 },45 });46 });

試したこと

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

コメントを投稿

0 コメント