The Swiper Slideshow Problem

Wappler General
1

Dear All,

After I upgraded to Wappler 3.5.1 this problem occurred:

In the design view, my project looks perfect as I want especially on the part that uses the swiper. But when the page is opened in the browser in “developer mode” for the first time (using Chrome), the autoplay on the slide in the swiper doesn’t work, and when you try to move it there is a glitch and the slide doesn’t shift to the center, strangely when my browser view mode is changed to “Responsive” and changes the size of the browser window suddenly everything is normal as I wanted. It seems that the page was not fully rendered correctly at the first time, and to trigger the correct appearance I need to change the size of the browser window.

Can you give me a clue how this happen?, I also try to use Firefox to view the page but the problem is the same, I need to change the browser window size to trigger the correct appearance.

Thanks.

2

Does this happen with the dev tools on only?
Please provide a link where we can check this.

3

You can try it at the following address in responsive browser mode with a small screen view option, maybe Android or other:

https://www.teknologirakyat.com/aja/

4

Well, you need to reload the browser when toggle device emulation in dev tools. That’s how the script works.
This doesn’t affect the end user in any way.

5

Hello Teodore,

Thanks for your feedback,
But, negative…
I have tried to open the web page using my android and the symptom still occurred even by refreshing the page many times.

I’ve tried several times to reconstruct this weirdness by doing some test projects, and it turns out that this error appears when I start adding the “Preloader” component, I can’t be sure why every time I add “Preloader” it gets this problem. Removing the preloader won’t solve that problem, I have to create a new project, or click “undo” repeatedly until it is in the position before the preloader component was installed.

6

If you have issues with the preloader component affecting the swiper on a mobile device browser, that’s a different thing.
@patrick will check this.

8

The preloader hides all content on load and the swiper doesn’t like that, it can’t calculate its size then. Use the Observer option on the swiper so that it detects when it gets visible and can recalculate its size.

1 Like