CODEWITHSUNDEEP
zurb-foundation
Tomek Buszewski
Tomek Buszewski

Reputation: 7935

Foundation 4 - customize Orbit

I have a problem with customization of Orbit from newest Foundation. From the docs:

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

{
  timer_speed: 10000,
  animation_speed: 500,
  bullets: true,
  stack_on_small: true,
  container_class: 'orbit-container',
  stack_on_small_class: 'orbit-stack-on-small',
  next_class: 'orbit-next',
  prev_class: 'orbit-prev',
  timer_container_class: 'orbit-timer',
  timer_paused_class: 'paused',
  timer_progress_class: 'orbit-progress',
  slides_container_class: 'orbit-slides-container',
  bullets_container_class: 'orbit-bullets',
  bullets_active_class: 'active',
  slide_number_class: 'orbit-slide-number',
  caption_class: 'orbit-caption',
  active_slide_class: 'active',
  orbit_transition_class: 'orbit-transitioning'
}

Mhm, great. But how to apply it? I tried

$('#slider').orbit({...});
---

$(document).foundation().orbit({...});

But nothing works. I know it's silly, but how to do it?

Upvotes: 2

Views: 2110

Answers (2)

Ryun
Ryun

Reputation: 729

"Starting in 4.0.7 you can also use the data-options attribute to pass configuration settings to Orbit." source: foundation.zurb.com/docs/components/orbit.html

Treat it like a style property:

<ul data-orbit data-options="timer_speed:2500; bullets:false;">
  ...
</ul>

Upvotes: 2

Alex
Alex

Reputation: 51

$(document).foundation('orbit', {bullets:false});

Upvotes: 1

Related Questions