CSS is loaded after the slides are rendered. You can see the whole content of the slides before the CSS kicks in and distributes it properly over the other slides

[Dinibewerbig]

CSS is loaded after the slides are rendered. You can see the whole content of the slides before the CSS kicks in half a second later and distributes it properly over the other slides.

[Dinibewerbig]

Please help me 👍

[Dinibewerbig]

here you can see a screenshot...

http://recordit.co/MIaaZekX6u

[ismail9k]

A quick fix would be, setting .hooper-slide width to 100%, this will make the slide take the whole slider width, until it loads and recalculate its width.
Another way to fix this is to set the carousel opacity: 0, and wait until it completely loads the show it again, this approach will need some enhancements from my side, emitting event after carousel loads.

[Dinibewerbig]

Thank you. I appreciate your work and I tried the quick fix but it didn't have an effect. The behaviour didn't change.

What I am also trying to achieve is to animate the transform:translate a little bit with ease-in-out. But it would be even better if I had a currrentSlide Class for the proper styling. Is it possible to add a currentSlide Css-Class so I can only show the currentSlide. Here is a great example, where a new slide is fading in with an animation

https://onlineuebungen.schularena.com/sheets/m698/tasks/13

[Dinibewerbig]

I have just found the is-active class in your code :-)

[Dinibewerbig]

setting the opacity of .hooper to 0 also shows the initial loading of the components.

[ismail9k]

If you’re using webpack in development mode, it will inject the CSS in javascript files, so the style will load after the page loads which will cause flickering for sure. Try to extract CSS files (run webpack in production mode) and please give me the feedback with the results.

For opacity method (which I recommend) it will not work until the following release, when the ‘loaded’ event is available.

[Dinibewerbig]

Looks like you are right. I don't get the same flickering behaviour if I run it in production mode. I am sorry I havent thought about that. Thank you for your help though. Concerning the loaded event, don't we already have an @Updated emit event which would be very similar to a loaded event, sort of?

[ismail9k]

Yes, you can use @updated event for now, since it fires each time carousel is updated (including the first time creation).

[ismail9k]

you can now use @loaded event in version 0.0.9

[Mucaccino]

Hi,

One idea is that Hooper hide yourself (or only your slides) before was loaded (on same moment of the @loaded event or watch data loaded #46) using a class .hooper-preload or anything like that.