Orbit Slider text cards flashing up on page load

I am using the Orbit slider stack to display text cards on top of a video background. When the page loads the four different text cards all appear at the same time, before they then disappear and everything behaves nicely! Is there any way to avoid that flash of all cards?

This is likely due to the video. It takes time for the video to load before the slider code starts executing. The slides get hidden when the code starts executing. If you remove the video temporarily does that clear up the flashing?

If I remove the video I can still see the four headlines, one under the other, before the placeholder image appears. If I remove that as well, then I still see the four headlines before they revert to one and the slider behaves as normal.

I’m not sure I follow your last post. Is this issued resolved when removing those items?

If not, send me a ZIP file containing your project file and any non-Elixir stacks or themes you’re using, and I will take a look. You can send that ZIP file to adam at elixirgraphics dot com via a service like Dropbox, or something similar.

Thanks Adam. I’ve send the dropbox link. It appears to be being caused by the TCMS blog on the same page.

Sounds like you’ve found the bad interaction. It is likely taking a while for something in TCSM to load which delays the slider loading.

Actually - just done a bit more testing and it does appear to be unrelated to TCMS. I have stripped everything other than an image off and am still getting the same thing. You can see it here:
Any ideas?

I loaded up your project file, but it is going to be impossible for me to troubleshoot in its current form, as I don’t have the majority of the stacks you’re using: CleanShot 2020-06-30 at 07.52.51@2x · CleanShot Cloud

When I load the page you posted above I do not see any problems. Here I’ve done a screen recording of loading the page from a freshly cleaned browser cache: ScreenFlow.mp4 • Droplr

I see the flash of text captions as well. Using Chrome.


The slider’s javascript kicks in after the page loads. The slider doesn’t do its thing until the images, videos, etc, etc load.

@parksyp Send me a cut down project file that shows your problem so I can take a closer look.

Thanks for all the diagnosing. With what you have said I have just tried getting rid of the ‘Play’ video stack entirely and it looks like that was the problem, even when only being used to display an image. I am now embedding the video with Impact and all works great. Thanks for all your help!

1 Like