Swiper.js – I need help

Design help Custom code
1

Hey community.

I just implemented a slider with Swipe.js and I have a problem.

I have 10 slides and I set loop to true. Now my problem is that when I swipe through the slides, the first 10 slides load just right, but when I swipe further, the looped slides appear too late.

Bildschirmfoto 2024-10-14 um 17.09.08
Bildschirmfoto 2024-10-14 um 17.09.081920×826 119 KB

Here is my current setup:

const andereFahrzeugeSlider = new Swiper(".swiper-andere-fahrzeuge", {
  // Parameters
  loop: true,
  slidesPerView: 'auto',
  centeredSlides: true,
  speed: 500,
  grabCursor: true,
  navigation: {
    nextEl: ".swiper-btn-next",
    prevEl: ".swiper-btn-prev",
  },
});

Does anyone have any experience with Swiper or an idea how to solve this problem?

Thanks a lot!

Here is my site Read-Only: LINK
Here is the stage-link: LINK
(how to share your site Read-Only link)

2

I just solved it by adding loopAdditionalSlides: 3, to the initialization code.

So my code looks like this now:

<script>
  const andereFahrzeugeSlider = new Swiper(".swiper-andere-fahrzeuge", {
    // Parameters
    loop: true,
    slidesPerView: 'auto',
    centeredSlides: true,
    speed: 500,
    grabCursor: true,
    loopAdditionalSlides: 3,
    navigation: {
      nextEl: ".swiper-btn-next",
      prevEl: ".swiper-btn-prev",
    },
  });
</script>
1 Like