Avoid jump on loading

Hi @pchenriques!

Your slider’s loading size is based on some of the Size tab settings:
https://smartslider.helpscoutdocs.com/article/1774-slider-settings-size
like Slider size, Limit slide width, Minimum height. The rest is calculated using JavaScript, for example your slide’s minimum height is as big as the height of your layers, margins and paddings are and your entire slider is as big as the highest slide is. Also with Fullwidth layout:
https://smartslider.helpscoutdocs.com/article/1774-slider-settings-size#layout
we are using JavaScript to go over theme limitations. So these JavaScript calculations are necessary and you cannot eliminate this jump completely with the design you have, but you could use for example the “minimum height” value at the layout settings to make it smaller.

Hello, @nextendweb_gabor

Thanks for the feedback. I was already using the “minimum height” feature with limited results. But you mention our design, meaning that you can remove the “jump” applying another design of the slider, maybe the Boxed one?

Also, while searching for a fix we cross this thread and at the website mention there there is no jump happening. @schnackel, can we have your feedback how you solve it?

Thanks

Hi @pchenriques

If you actually meant the browser scrolls to the slider when you switch slides, then it is based on the “Scroll to Slider” setting what you can find at our Slider Settings > Develoeer tab: https://smartslider.helpscoutdocs.com/article/1806-slider-settings-developer

You should disable that setting and the browser will no longer scroll to the slider, when you switch slides and the slider have parts outside of the viewport.

Best regards,
Laszlo.

Hi @laszloszalvak

Sorry, I didn’t make myself understand, that’s not the case. What I am trying to solve is the vertical “jump” that pushes down all data already showing on the page when the slider loads. As it didn’t have the space reserved and because it loads slower than the text below it pushes all down when it does, as shown here

The reference to the website reference at the mentioned thread has nothing to do with the issue posted there but when visiting the site I verify there is no jump in any browser window size so I wonder how to implement it.

My questions in my previous post still apply.

Thanks

Hi @pchenriques

Sorry, I just noticed in the first post you also had a video about the problem.
The problem you see is related to that your content doesn’t fit into the area of the slider as it requires much higher space.
So as my colleague mentioned, when the slider loads, we will need to adjust the height of the slider to the proper height with JavaScript. This is why this jump can not be avoided in your case, unless you drastically reduce the font size so the content will fit into the default area. However that would probably made your text illegible, as it would bee too small.

If you check the other page you linked earlier, you will notice that that slider doesn’t have any content, it just have some background images. So the slider keeps its original width height ratio.

Best regards,
Laszlo.

Hi @laszloszalvak

Thanks for the feedback.

If I understood your clarification correctly, wouldn’t the jump be avoided if the image loaded first and text after? Could it be done? Not having the jump is much more enjoyable for the end-user.

Thanks

Hi @pchenriques

That wouldn’t work. It would just cause the jump (and a rescale the image!) after the text was rendered.

The height of the slides depends on the height of the layers inside them. The height of the whole slider depends on the tallest slide. So the texts (layers) must be rendered to be able to display the slider propely.

I’ll write up for discussion if there’s a way to minimize this jump, and I’ll let you know if we’re able to figure out something.

Hi, @nextend_ramona

Thanks for the explanation.

Looking forward to any eventual improvement. It would definitely improve CLS score… ??

Greetings,

Pedro