Help Needed: Make Swiper Loop Continuously on Desktop | Relume Community

Help Needed: Make Swiper Loop Continuously on Desktop

I need some help with Swiper. I have set up a CMS dynamic slider and would like it to loop continuously. Right now, the looping works on tablet and mobile breakpoints. But on desktop it plays to the last slide (6 total) and stops. Here is a read-only link to the site. The Swiper sliders is on the home page in section_slider-swiper

26 comments

Lucca P.
·
To see the Swiper working we need a published link. I don't use swiper, so i don't really know how it works, but on the "settings" pannel in Webflow there's an option fo the swiper to loop (at least on the native swipers)
Susi H.
·
The published link is here: https://pearce-lewis-dev.webflow.io/
Susi H.
·
I’m using Swiper, so I can use CMS to create the slides dynamically. Webflow native slides can’t be generated with CMS unless there is an update I’m not aware of.
Matt J.
·
Susi H. I would try removing this line from the breakpoint parameters. This breakpoint is basically saying anything GREATER than 991 which might be why it loops fine on tablet down but not on a desktop, I think this parameter is overriding your loop: true;
Susi H.
·
Matt J., I removed the line, but the desktop still pauses after the last slide is revealed.
Lucca P.
·
Try enabling this "Infinite repeat slides" on the "settings" panel.
Susi H.
·
Hi Lucca P. thanks for the suggestion. This doesn’t work because Swiper doesn’t build off of the native slider in Webflow, so this setting doesn’t come up within the build.
Lucca P.
·
It does show up on the read-only link. You need to have the slider component selected. Also, the other one that is working has this option selected. I just can't check if it works indeed because it needs to be published. Check the screenshots.
Matt J.
·
Lucca P. there are several sliders on this page which is confusing for sure but the one Susi is having issues with is the services one in the middle here. I am not entirely sure what the issue is to be honest.
Matt J.
·
maybe something to do with that custom code embed for equal heights? I would try removing that just to troubleshoot if its causing a conflict
Lucca P.
·
My bad! Matt J. and Susi H.
Matt J.
·
no worries Lucca - appreciate your help - if you have any other ideas please post them!
Susi H.
·
Same here Lucca
Susi H.
·
Matt J. I’ll remove, but I’m not sure that is the issue.
Matt J.
·
yeah, I agree. Its really hard to test these things being that like Lucca mentioned, the changes have to be published.
Susi H.
·
the published site is here: https://pearce-lewis-dev.webflow.io/ I just removed the embedded code
Matt J.
·
yeah, sad
Matt J.
·
shouldn't this say swiper or?
Matt J.
·
Susi H.
·
I was following a tutorial that said to change it to a unique name in case you have more than one slider on your account: https://youtu.be/f1l25JX1vhI?si=Q-UJNKWxd2Yr8WgX approx 9:21
Lucca P.
·
I just read through the Swiper documentation. Apparently, whe you loop it, you need to have 2x the slidesPerView amount. In your case, you only have 6. This could be the issue. Try adding 2 more slides or changing the slidesPerView to 4. Here is the documentation link: https://swiperjs.com/migration-guide-v9#loop-mode
Lucca P.
·
changing the slidesPerView to 3*** Sorry.
Susi H.
·
I tried 3 before and it didn’t work. I’ll test a few options.
Susi H.
·
3 is working now — I’ll see if the client is good with the layout change. Thanks for helping Lucca P. and Matt J. for helping me with this.
❤️1
Lucca P.
·
Nice! Glad it worked 😁
❤️1
Matt J.
·
🙌 🙌🙌
❤️1