Foundation-sites: [F 6.0.4] Orbit don't work correctly

[xfifix]

On the slideshow i can change just once slide... i use the example found on the website of foundation.

[xfifix]

if i put useMUI to false the pagination work but the button next and previsous when i click on it create two calls of changeSlide function. ...

[gnicol-bzh]

I'm sorry for you, but "Orbit has been deprecated, meaning that it is no longer supported"... I hope someone will be able to help you anyway ;)

[xfifix]

Ok thanks So Why doesn't mention this in the doc of foundation 6.... this is wasting my time.

[gnicol-bzh]

Oh F6! I didn't take the time to look at it yet...

I was thinking it was definitively deprecated but _someone_ said that Orbit was actually deprecated in an earlier version of Foundation, however, it may return as a simple image slider with basic features - it is not an official blog.

Seeing that Orbit is back in F6 docs, maybe I was wrong in telling you that it was deprecated... Sorry :/

[KnightYoshi]

@gnicol-bzh Orbit is definitely not deprecated for Foundation 6 and it's not just an image slider. It utilizes the new Motion UI library and allows use without images.

@xfifix I'm also having this issue, but I have not found any solution. I posted in the Foundation forums, but wasn't given any useful information pertaining to the problem

[elmiguel]

I have been experiencing issues with Orbit as well. It doesn't seem to want to load 100% of the time. If you try to overflow the page by hitting refresh repeatedly it does eventually show. I find that if you are doing a MVC structure it seems to break more often than just on a single page.

[elmiguel]

I just did some tests on my test webapp and I found that:

<ul class="orbit-container">

Seems to be the culprit. If you change that to something else, you will find that it works but not as pretty. Going to look at what that css style is doing.

[elmiguel]

After looking into the css and the JS plugin script it seems like there is a timing issue when the DOM is being loaded. Although the documentation claims to not have the initialization of Foundation wrapped in a jQuery.ready() it stills needs one. I wrapped it in the jQuery.ready() and it seems to work 100% now.

Not sure if the Foundation js is using the jQuery.ready() within its own closure but the documentation should reflect this as a note or tip if in the event that it doesn't load or function properly until there is a more tried method of implementation.

[samvloeberghs]

+1

[KnightYoshi]

@elmiguel @xfifix

You need to add the Motion UI CSS. I was also having issues with it not cycling through the slides. Once I added the MUI CSS (via SCSS) it worked just fine.

[elmiguel]

I have also noticed that anchor tag references in the url affect the slider as well.

in my test app, I have an accordion uI (copied and pasted from the docs) and while in off canvas view if you cycle through the links the orbit element breaks.

[elmiguel]

@Knight-Yoshi adding Motion UI alone doesn't fix the timing on the DOM. I had the css framework in place prior to adding the on ready wrapper and the issue was there.

Future use is showing there are more things at play here as anchor references the url affect the functionality of the Orbit plugin.

[KnightYoshi]

@elmiguel It resolves the issue that the xfifix, others, and myself experienced. I only added the MUI CSS and it works just fine.

[KnightYoshi]

@elmiguel To prove what I'm talking about
Without the MUI CSS: http://codepen.io/anon/pen/XXWJWV
With the MUI CSS: http://codepen.io/anon/pen/jWOEEV

The only difference between them is that it has the MUI CSS classes. Nothing with the JavaScript is changed.
.slide-in-down.mui-enter, .slide-in-left.mui-enter, .slide-in-up.mui-enter, .slide-in-right.mui-enter, .slide-out-down.mui-leave, .slide-out-right.mui-leave, .slide-out-up.mui-leave, .slide-out-left.mui-leave, .fade-in.mui-enter, .fade-out.mui-leave, .hinge-in-from-top.mui-enter, .hinge-in-from-right.mui-enter, .hinge-in-from-bottom.mui-enter, .hinge-in-from-left.mui-enter, .hinge-in-from-middle-x.mui-enter, .hinge-in-from-middle-y.mui-enter, .hinge-out-from-top.mui-leave, .hinge-out-from-right.mui-leave, .hinge-out-from-bottom.mui-leave, .hinge-out-from-left.mui-leave, .hinge-out-from-middle-x.mui-leave, .hinge-out-from-middle-y.mui-leave, .scale-in-up.mui-enter, .scale-in-down.mui-enter, .scale-out-up.mui-leave, .scale-out-down.mui-leave, .spin-in.mui-enter, .spin-out.mui-leave, .spin-in-ccw.mui-enter, .spin-out-ccw.mui-leave

Also with the 6.0.5 release, the change log has a bug fix,
Orbit: added a proper fallback if Motion UI is not available or unsupported

[elmiguel]

Glad to hear it is working for you, but as I mentioned in my response that I already had Motion UI included and was experiencing the same issue. So although this is an another alternative, it still doesn't solve the time issue in which even Motion UI would suffer from if not all the elements have been rendered correctly. Motion UI should be included as in the docs -> orbit -> view page source

<!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->

is there which to me states the if not built with sass, then this must be included. I always view the page source as I find that the docs always leave out the goodies ;p.
, and also here: http://jointswp.com/foundation-6-development-need-know/

Not trying to argue and apologize if it seems so, just mentioning that Motion UI is not the only issue for particular case. As re-iterating, I already had Motion UI included and experienced that issue and adding a simple jQuery.ready() wrapper fixed my situation.

[oleksii-semko]

@xfifix thank you for the opening this issue.
@elmiguel thank you so much for the solution to wrap in a jQuery.ready() it fixed my issue.

[zurbchris]

Glad you got this solved!