<%= @page_title %>

Orbit is an easy to use, powerful image slider that's responsive, allowing you to swipe on a touch-enabled device.

---

Build Orbit With HTML

Building Orbit is pretty simple using our HTML classes and structure; you'll just need to write the markup, find some images or text, fire up the Javascript and you'll be ready to go. On touch-enabled devices, Orbit has swipe functionality that makes it easy to switch slides. On screens without touch interfaces, you'll see bullet and arrow navigation if you have the options setup in your JS. Here's markup structure for Orbit:

<%= code_example '

• 
  ...
• 
  ...
• 
  ...

', :html %>

We'll Automatically Add HTML

To keep your markup really clean, we've let JS add what's needed for the navigation, bullets and other parts of the plugin. Once the page has been loaded, your markup will look different. Below is an example of the markup so you know what to target.

<%= code_example '

', :html %>

---

• Headline 1

  Subheadline

  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

• Headline 2

  Subheadline

  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

• Headline 3

  Subheadline

  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

---

Deep Linking Support

You can now link to slides in Orbit. This is useful when constructing custom bullets or referencing a particular slide in a description. To see it in action click on one of the links below:

• Goto Slide 1
• Goto Slide 2
• Goto Slide 3

The markup is simple, each <li> should have a data-orbit-slide data attribute with a unique identifier for the slide. Then anywhere outside of your Orbit slider you can use data-orbit-link to reference that slide.

<%= code_example '

• Headline 1

  Subheadline

  Pellentesque habitant morbi tristique senectus.

• Headline 2

  Subheadline

  Pellentesque habitant morbi tristique senectus.

• Headline 3

  Subheadline

  Pellentesque habitant morbi tristique senectus.

• Goto Slide 1
• Goto Slide 2
• Goto Slide 3

', :html %>

---

Graceful Loading & Preloader

We've cleaned up how Orbit initializes by adding a wrapper feature that stops the ugly flash of unstyled content. Here's the markup needed:

<%= code_example ' ', :html %>

To add the preloader, simply include a div class="preloader" right inside the wrapper, like so:

<%= code_example ' ', :html %>

---

Available SCSS Variables

We've included a bunch of variables that you'll be able to use if you're into getting SASSy with things.

<%= code_example ' /* We use these to control the caption styles */ $orbit-container-bg: #f5f5f5; $orbit-caption-bg-old: rgb(0,0,0); $orbit-caption-bg: rgba(0,0,0,0.6); $orbit-caption-font-color: #fff; /* We use these to control the left/right nav styles */ $orbit-nav-bg-old: rgb(0,0,0); $orbit-nav-bg: rgba(0,0,0,0.6); /* We use these to control the timer styles */ $orbit-timer-bg-old: rgb(0,0,0); $orbit-timer-bg: rgba(0,0,0,0.6); /* We use these to control the bullet nav styles */ $orbit-bullet-nav-color: #999; $orbit-bullet-nav-color-active: #222; /* We use thes to controls the style of slide numbers */ $orbit-slide-number-bg: rgba(0,0,0,0); $orbit-slide-number-font-color: #fff; $orbit-slide-number-padding: emCalc(5px); /* Graceful Loading Wrapper and preloader */ $wrapper-class: "slideshow-wrapper"; $preloader-class: "preloader"; ', :css %>

---

Using the JavaScript

You'll need to include foundation.orbit.js if you want to use Orbit. You'll also need to make sure to include zepto.js and/or jquery.js along with foundation.js above the Orbit plugin. Above your closing </body> tag include the Foundation library and either Zepto or jQuery.

Read how to install Foundation JavaScript

Required Foundation Library: foundation.orbit.js

Then, you'll need to add a data-orbit data attribute to make the JS work properly on that element. That looks like:

<%= code_example '

...

', :html %>

Optional JavaScript Configuration

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

<%= code_example " $(document).foundation('orbit', { timer_speed: 10000, pause_on_hover: true, resume_on_mouseout: true, 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' });", :js %>

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:

<%= code_example '

...

', :html %>

Events

You can bind to the following events in your code.

Event	Params	Description
orbit:ready	event	Fires when the slider has loaded
orbit:before-slide-change	event	Fires before a slide changes
orbit:after-slide-change	event, orbit	Fires after a slide transition animation has finished. The orbit parameter contains slide_number and total_slides.
orbit:timer-started	event	Fires each time the timer is started/resumed
orbit:timer-stopped	event	Fires each time the timer is paused/stopped

Example

Here's an example of how you can bind to these events:

<%= code_example '

• 
  ...
• 
  ...
• 
  ...

', :html %>