CODEWITHSUNDEEP
csszurb-foundationeasingorbit
fenixkim
fenixkim

Reputation: 363

Foundation 4 Orbit Custom Transition

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?

Upvotes: 0

Views: 2128

Answers (2)

Oleg Pryadko
Oleg Pryadko

Reputation: 1699

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.

Upvotes: 1

von v.
von v.

Reputation: 17108

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();

Upvotes: 3

Related Questions