Join the Webstudio community

Updated 7 months ago

Swiper performance problems

At a glance
I'm trying to build a slider presentation site, based on your shared template. I turned off autoplay and changed the timing. Beside that, scripts + classes found in the template are unchanged.

Problem:
When I use image instances, the mobile swipe interaction becomes jerky. Often, it does not work at all – especially if you return to the tab after some idle time. If I instead use the same images as background images, the swipe interaction remains snappy and stable. As I want images indexed, I'd like to avoid bg-images.


Version with Image Instances (jerky)
https://apps.webstudio.is/builder/593e197c-b26d-404e-bf0a-d6d6a9b0ba80?authToken=660f3660-5cfd-455f-b030-5739d65b4ec7&mode=preview

https://swiper-solid-bg-bj8y0.wstd.io/

Version with Background images (fast)
https://apps.webstudio.is/builder/6119d4bf-cc80-473e-a55d-5fb08ee7b5ae?authToken=36cfb345-af7c-4197-8466-64b395196067&mode=preview

https://swiper-cleaner-fin-yzekk.wstd.io/
O
H
8 comments
I don't see a difference on android pixel 8
just for the sake of experiment, try setting draggable=false on the images
Thanks for having a look! Unfortunately, it performs the same for me in the forum published versions (same = working fine! )

Yet, I spent hours figuring out what could cause terrible stickiness (or slider being stuck).

 I wonder if this might have to do with CDN Cache refresh going on? In the real file I worked for hours, not changing anything structurally – and then that damn Slider stops working

My images are 2k-ish, not overly large. Yet, also inside the editor I saw initial image-rendering to require time. Images sometimes even get revealed in blocks, like in a Raytracer, clearly lower resolution versions used (pixelation); serving better versions over time. Often, when cycling through the tree in Navigator I see the wrong image per slide shown. Quickly switching to some other tree item will usually fetch the correct version. All in all, a very challenging learning situation

My machine has a lot more RAM than Chrome can handle per Tab.
just for the sake of experiment, try setting draggable=false on the images
When I create a draggable property, it is by default set to off. Is this fine – or am I in the wrong spot?
You assumption is unlikely
For anyone interested: The reason for swipe issues was a Vimeo embed.
I have a feeling this can be worked around as well
Add a reply
Sign up and join the conversation on Discord