How to make slide visible before initialization?

[aleksanderd]

Hi!

I noticed there is visibility: hidden on root .splide element until initialization done.
It is not too good for top-banner-slider on main page, etc.

What the best/right way to make it visible even if js is not executed yet?

Thank you!

[NaotoshiFujita]

Just override the style if you can accept that the user is able to see noninitialized elements:

.splide {
  visibility: visible;
}

[aleksanderd]

but the question is more about right/correct way... what means "to see noninitialized elements"? what the main reason to hide it by default... and what could go wrong if I override this style?

I expected just to see static image from first slide until init, the splide styles is here, it might be enough for simple cases (type=slide, full width, etc), isnt?

thank you!

[NaotoshiFujita]

The reason is that the dimension of slides are calculated by JavaScript.
For example, if the perPage is 2, the width should be 50%. If the gap is 1rem it should be (100% + 1rem) / 2.
To accept any kinds of combinations, the slider is initially hidden.