Foundation Orbit content slider not loading properly - zurb-foundation

When the slider loads all the content is stacked.
Please check the effect on http://smbsol.com/?lang=fr and switch between languages for example, you can see that the orbit content slider loads all the slides at once then puts them into a slider.
What would be a possible smart fix ?
Is there any way to not display the div until it finishes its loading?

Related

When Live Activity updates data, the picture will fade in and fade out, how to turn off this animation effect?

Animate content updates
When you define the user interface of your Live Activity, the system ignores any animation modifiers — for example, withAnimation(_:_:) and animation(_:value:) — and uses the system’s animation timing instead. However, the system performs some animation when the dynamic content of the Live Activity changes. Text views animate content changes with blurred content transitions, and the system animates content transitions for images and SF Symbols. If you add or remove views from the user interface based on content or state changes, views fade in and out. Use the following view transitions to configure these built-in transitions: opacity, move(edge:), slide, push(from:), or combinations of them. Additionally, request animations for timer text with numericText(countsDown:).
When Live Activity updates data, the picture will fade in and fade out, how to turn off this animation effect?
I tried all possible ways to turn off the animation, but when refreshing the Live Activity, the picture still has a semi-transparent animation.

Change the order of ColumnLayout or ListView and save / restore it

I'm working on a stream overlay that extracts information out of a game (flight simulator) and displays it on the screen. Right now I'm using Qt in conjunction with a *.html to render the overlay. It is all working really well, however I wanted to add some customization options for the users of my overlay software and I figured the best way would be to render the Overlay in QML.
The main part of the overlay is a row that contains around 8 "elements" that display the relevant data.
One thing that should be customized is the order of the elements in the row. But I really have no idea how to implement this feature. I've seen a few posts and tutorials on how to customize the order in a View using the DelegateModel. However right now it's not a view but QML Components inserted in a RowLayout due to the fact that they are all different components (e.g. some of the images are actually animated for which I'm using a component that uses Canvas2D to draw the images). I guess I could figure out a way to store those elements in a model using the Loader Component to display the content in QML. But even then I'm not entirely sure how to store and restore the order of the elements. As far as I can tell the DelegateModel only changes the View and not the underlying model.
Any suggestion or best practice to accomplish my goal would be highly appreciated.

Foundation off-canvas reveal-for-large - in IE slides open on each page load

I am using Foundation off-canvas and the reveal-for-large class so that the sidebar is always visible to larger screens. In Chrome and Firefox, the sidebar always appears open between page loads, which is great. However, upon each page load in Edge and IE, the sidebar first does not appear (although left margin space has been reserved for it) - and then the sidebar slides in to fill the space.
It is distracting to have this animation on each page load. Is there any way to force the sidebar to stay open in IE? Or disable the animation perhaps?
Change the $offcanvas-transition-length SASS property to 0s.

Jssor Slider: Is there a way to have img thumbnail nav and caption with FX?

I have both a Jssor slider with pic thumbnails and a Jssor slider with active captions working but cannot seem to combine them in one slider that has both and works. Is it possible to have both in one slider? What would I add to one or the other to do that? I am not a programmer, just barely familiar with the code enough to adjust it. Thanks for your time and effort!

Foundation Orbit bullets not centering when using show-for-small

I would like to have some kind of navigation for a slider when viewed on a mobile device. Since the directional arrows won't show on mobile (if anyone can tell how to make them, that would be awesome) I thought a good solution would be to have a different slider, same images, that is "show-for-small" and has bullets underneath.
It works, but there is an issue that's killing me. If you load the page with the browser window wide (desktop) and scale to a mobile width the sliders switch, but the bullets aren't centered. They appear shifted to the right. If you reload the page at that mobile width with they are fine, perfectly centered below the image.
Does anyone have any clue on how to fix this? I set up a page to demonstrate the problem. www.jonesco.com/_foundation/bullet_problem.html
Thanks
Add the following to your stylesheet:
.orbit-bullets {
display: table;
text-align: center;
}