swiperを無限ループしたいのに空白ができる

const  swiper = new Swiper('.swiper', {
  loop: true,
  width: 322,
  autoplay: {
      delay: 5000,
    },
});

ps. 並んでいる画像の左がに後３つ画像があります。クエッションのボックスのように無限ループさしたいです。

Javascript

Lhankor_Mhy

2022/01/27 01:04

HTMLコードをご提示ください。

gaki-log

2022/01/30 04:35

<section class="works"> <div class="sc-title" data-aos="slide-down">制作実績</div> <div class="sc-sbtitle">WORKS</div> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="img/digital-marketing-1.png" alt=""> <h2>株式会社サンプル採用サイトのコーディングを行いました！</h2> <div class="swiper-text"> <p>採用技術：jQuery,Bootstrap4</p> <p>実装期間：2週間</p> <p>担当コーダー：石井</p> </div> </div> <div class="swiper-slide"> <img src="img/arnel-hasanovic-MNd-Rka1o0Q-unsplash.png" alt=""> <h2>コーディングカンファレンスのイベント LPの制作を行いました！</h2> <div class="swiper-text"> <p>採用技術：jQuery,WordPress</p> <p>実装期間：4週間</p> <p>担当コーダー：石井</p> </div> </div> <div class="swiper-slide"> <img src="img/digital-marketing-1.png" alt=""> <h2>株式会社サンプル採用サイトのコーディングを行いました！</h2> <div class="swiper-text"> <p>採用技術：jQuery,Bootstrap4</p> <P>実装期間：2週間</P> <p>担当コーダー：石井</p> </div> </div> <div class="swiper-slide"> <img src="img/hal-gatewood-tZc3vjPCk-Q-unsplash.png" alt=""> <h2>株式会社サンプル採用サイトのコーディングを行いました！</h2> <div class="swiper-text"> <p>採用技術：jQuery,Bootstrap4</p> <p>実装期間：6週間</p> <p>担当コーダー：石井</p> </div> </div> <div class="swiper-slide"> <img src="img/digital-marketing-1.png" alt=""> <h2>株式会社サンプル採用サイトのコーディングを行いました！</h2> <div class="swiper-text"> <p>採用技術：jQuery,Bootstrap4</p> <p>実装期間：2週間</p> <p>担当コーダー：石井</p> </div> </div> <div class="swiper-slide"> <img src="img/arnel-hasanovic-MNd-Rka1o0Q-unsplash.png" alt=""> <h2>コーディングカンファレンスのイベント LPの制作を行いました！</h2> <div class="swiper-text"> <p>採用技術：jQuery,WordPress</p> <p>実装期間：4週間</p> <p>担当コーダー：石井</p> </div> </div> </div> </div> </section>

Lhankor_Mhy

2022/01/31 02:12

ご提示のコードを試してみましたが、問題が再現しませんでした。おそらく、ご提示の部分には原因はなさそうに思います。ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。問題再現の手順をもう少し詳しく書いていただけますか？

gaki-log

2022/01/31 13:39

.swiper{ margin-bottom: 90px; } .swiper-slide{ border: solid 1px #DDDDDD; border-radius: 10px; margin-right: 56px; } .swiper-slide h2{ font-size: 1.6rem; font-weight: bold; margin: 24px 18px 0; } .swiper-text{ margin: 34px 0 34px 18px; line-height: 1.5; } .swiper-slide p{ font-size: 1.4rem; font-weight: bold; } こちらがcssになります。空白がなく無限ループさせたいのですが、現在では、アイテムが8個過ぎた後に空白が出来てしまい、また一つ目のアイテムに戻ります。

Lhankor_Mhy

2022/02/01 01:04

ご提示のコードを試してみましたが、問題が再現しませんでした。繰り返しになってしまいますが、問題の再現手順を教えてください。

gaki-log

2022/02/01 14:53

これ以上問題の再現手順を教えれることはないので、諦めます。

Lhankor_Mhy

2022/02/01 15:12

そうでしょうか？すくなくともHTMLのすべてを拝見していないと思いますので、その辺りに原因があると私は考えています。諦めるのは早いのではないかな、と思ってしまいました。もちろん、諦めるのはあなたの自由ですので、その意志は尊重します。その場合はどうかお気になさらず。