Foundation 4 Orbit Custom Transition

Question

I'm trying to customize the transition of the Foundation 4 Orbit component. I want to change the ease property but I've can't do it.

In the docs says: use the property orbit_transition_class to specify my own class which is as follow:

.my-transition {
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}

This is my Hmarkup:

<ul data-orbit data-options="orbit_transition_class:my-transition;">

I don't know what I doing wrong, Can somebody tell me how to achieve it?

score 3 · Answer 1 · answered Mar 27 '13 at 00:18

3

The documentation says:

Orbit options can only be passed in during initialization at this time.

You need to initialize orbit (and any of Foundation's component for that matter) like this:

$(document).foundation('orbit', {
    orbit_transition_class: 'my-transition'
});
$(document).foundation();

answered Mar 27 '13 at 00:18

von v.

15,658
3
54
78

In the official documentation says: --- Starting in 4.0.7 you can also use the data-options attribute to pass configuration settings to Orbit. Treat it like a style property. --- I'm asking how to set the transition value to the `orbit_transition_class` property. – fenixkim Jun 06 '13 at 20:39

Oleg · Answer 2 · 2013-10-06T20:48:22.023

I had the same issue, so I looked at the Orbit source code in my version of Foundation (4.3.2). It turns out the orbit_transition_class setting exists but is not currently being used for anything.

This is either a bug or they are still phasing out/phasing in this setting.

You can check if your version is using it by doing a text search for "orbit_transition_class" in the js/foundation/foundation.orbit.js file. If you only get one result, in the settings object, it is probably an unused setting.

Update: I switched to WooThemes FlexSlider 2, which seems to be more flexible.

Foundation 4 Orbit Custom Transition

2 Answers2