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
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)
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.
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;
Hi 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.
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.
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.
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
no worries Lucca - appreciate your help - if you have any other ideas please post them!
yeah, I agree. Its really hard to test these things being that like Lucca mentioned, the changes have to be published.
the published site is here: https://pearce-lewis-dev.webflow.io/
I just removed the embedded code
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
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
3 is working now — I’ll see if the client is good with the layout change.
Thanks for helping and for helping me with this.
