Swiper.js Looping Not Loading Slides Fast Enough

Design help Custom code
1

My read-only link:

A visual summary:

Screenshot 2025-03-15 at 1.16.54 AM
Screenshot 2025-03-15 at 1.16.54 AM1920×860 180 KB

I’m using Swiper.JS 11 for a slider, and it functionally works. But new slides don’t load in at the corners fast enough. They only load once they’re part of the slides in view. Messing with loopAdditionalSlides only breaks the slider even more. Anyone know how to correct this?

2

Hello @dcmaia,
Try setting your images from lazy loading to eager loading on the images settings. I hope this helps!

3

Hey thanks for the reply @Pablo_Cortes
That would be a good solution, but it’s not just the images that don’t load, it’s the entire slide. This also happens indefinitely, even once the user cycles through every slide.

4

@dcmaia Your slider is not working at all Webflow - Troubleshooting - 19 March 2025 | Loom

5

Hey @addweb thanks for the reply.
I’m using Swiper.js. Since it’s custom JS, it’s not gonna run in the designer. Try checking it out on the published site.

6

Hey @dcmaia, did you find a solution for your issue? because your slider works on my end just fine.

7

Interesting! I didn’t, this is how it looks like for me:
https://www.loom.com/share/d5e5820374d5482fad6d7c851ddfa44f?sid=363cf9fd-ef45-4424-82c4-1a8632ae2cc5

8

Hey everybody, I think I fixed it, just unsure of which action actually did it. So a couple of things:
TL;DR:

  1. Check which version of Swiper you’re using. I was on 8, but started over on the newest version (11 at the time of writing) just in case.
  2. Double-check and make sure there are no typos in your code.
  3. The loop and loopAdditionalSlides params break if you don’t have a minimum number of slides. AKA double-check Swiper’s docs about criteria you need to meet for a specific param to function properly.

Long version:

  • I switched from Swiper 8 to 11 and rewrote the code just in case. There might’ve just been a dumb mistake no one caught like a missed comma or colon somewhere.
  • According to Swiper 11 docs, there are actually a couple of limitations on the loop param. Your number of slides must be:
    – more than or equal to slidesPerView + slidesPerGroup
    – even to slidesPerGroup (or use loopAddBlankSlides parameter)
    – even to grid.rows (or use loopAddBlankSlides parameter)

Since in my case slidesPerView: 3, then the minimum number of slides has to be 6. (I’m not using the slidesPerGroup param). Earlier, loopAddBlankSlides was completely breaking everything - scrolling uncontrollably and losing track of the active slide on user input. I noticed that this happens when the number of slides doesn’t meet the loop criteria.

Things seem to be smooth for the most part now. The only thing that’s not working is loopAddBlankSlides doesn’t seem to like any value higher than 1 in my case. Since this would only affect massive screens, I’m not too bothered by it.

1 Like