---
title: Orbit
layout: doc/layouts/default.html
---
# Orbit
***
{{> examples_orbit_basic}}
***
## How to Setup Orbit
Orbit requires minimal HTML markup to function. Our JavaScript takes care of most of the heavy lifting for you. The only thing you need to do is add a `` element to your page. You can then populate it with images, text, and captions. Here's the markup required to implement a basic Orbit slider on your page:
HTML
{{#markdown}}
```html
{{> examples_orbit_basic}}
```
{{/markdown}}
Rendered HTML
{{#markdown}}
```html
{{> examples_orbit_basic_rendered}}
```
{{/markdown}}
***
## Content Sliders
Orbit can also be used with just content and no images.
HTML
{{#markdown}}
```html
{{> examples_orbit_content}}
```
{{/markdown}}
Rendered HTML
{{> examples_orbit_content}}
***
## Deep Linking
To link to a particular slide in your Orbit slider you will need to add a `data-orbit-slide` attribute to each slide. Then anywhere on your page you can use `data-orbit-link` to link to that slide.
***
## Customize With Sass
We've included a bunch of variables that you'll be able to use if you're into getting SASSy with things.
{{#markdown}}
```scss
$include-html-orbit-classes: $include-html-classes;
// We use these to control the caption styles
$orbit-container-bg: #f5f5f5;
$orbit-caption-bg: rgba(0,0,0,0.6);
$orbit-caption-font-color: #fff;
$orbit-caption-font-size: emCalc(14);
$orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
$orbit-caption-padding: emCalc(10,14);
$orbit-caption-height: auto;
// We use these to control the left/right nav styles
$orbit-nav-bg: rgba(0,0,0,0.6);
$orbit-nav-bg-hover: rgba(0,0,0,0.6);
$orbit-nav-arrow-color: #fff;
$orbit-nav-arrow-color-hover: #ccc;
// We use these to control the timer styles
$orbit-timer-bg: rgba(0,0,0,0.6);
$orbit-timer-show-progress-bar: true;
// We use these to control the bullet nav styles
$orbit-bullet-nav-color: #999;
$orbit-bullet-nav-color-active: #222;
$orbit-bullet-radius: emCalc(18);
// We use these 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: rem-calc(5px);
// Graceful Loading Wrapper and preloader
$wrapper-class: "slideshow-wrapper";
$preloader-class: "preloader";
```
{{/markdown}}
***
## Configuring Orbit
Here is Orbit in its most basic configuration. You can choose to either initialize with JavaScript or use data-attributes, which are explained below.
JS
{{#markdown}}
```js
$(document).foundation('orbit', {
animation_speed: 1500
});
```
{{/markdown}}
HTML
{{#markdown}}
```html
```
{{/markdown}}
{{#markdown}}
```js
$(document).foundation('orbit', {
```
{{/markdown}}
- Initialization
- Initializes orbit
{{#markdown}}
```js
animation: 'fade',
```
{{/markdown}}
- animation
- Sets the type of animation used for transitioning between slides. Default: fade
{{#markdown}}
```js
timer_speed: 10000,
```
{{/markdown}}
- timer_speed
- Sets the amount of time in milliseconds before transitioning a slide. Default: 10000
{{#markdown}}
```js
pause_on_hover: true,
```
{{/markdown}}
- pause_on_hover
- Pauses on the current slide while hovering. Default: true
{{#markdown}}
```js
resume_on_mouseout: false,
```
{{/markdown}}
- resume_on_mouseout
- If pause on hover is set to true, this setting resumes playback after mousing out of slide. Default: false
{{#markdown}}
```js
animation_speed: 500,
```
{{/markdown}}
- animation_speed
- Sets the amount of time in milliseconds the transition between slides will last. Default: 500
{{#markdown}}
```js
stack_on_small: true,
```
{{/markdown}}
- stack_on_small
- Default: true
{{#markdown}}
```js
navigation_arrows: true,
```
{{/markdown}}
- navigation_arrows
- Default: true
{{#markdown}}
```js
slide_number: true,
```
{{/markdown}}
- slide_number
- Default: true
{{#markdown}}
```js
container_class: 'orbit-container',
```
{{/markdown}}
- container_class
- Default: orbit-container
{{#markdown}}
```js
container_class: 'stack_on_small_class',
```
{{/markdown}}
- stack_on_small_class
- Default: 'orbit-stack-on-small'
{{#markdown}}
```js
next_class: 'orbit-next',
```
{{/markdown}}
- next_class
- Class name given to the next button. Default: 'orbit-stack-on-small'
{{#markdown}}
```js
prev_class: 'orbit-prev',
```
{{/markdown}}
- prev_class
- Class name given to the previous button. Default: 'orbit-prev'
{{#markdown}}
```js
timer_container_class: 'orbit-timer',
```
{{/markdown}}
- timer_container
- Class name given to the timer. Default: 'orbit_timer'
{{#markdown}}
```js
timer_paused_class: 'paused',
```
{{/markdown}}
- timer_paused_class
- Class name given to the paused button. Default: 'paused'
{{#markdown}}
```js
timer_progress_class: 'orbit-progress',
```
{{/markdown}}
- timer_progress_class
- Class name given to the progress bar. Default: 'orbit-progress'
{{#markdown}}
```js
slides_container_class: 'orbit-slides-container',
```
{{/markdown}}
- slides_container_class
- Class name given to the slides container. Default: 'orbit-stack-on-small'
{{#markdown}}
```js
bullets_container_class: 'orbit-bullets',
```
{{/markdown}}
- bullets_container_class
- Default: 'orbit-bullets'
{{#markdown}}
```js
bullets_active_class: 'active',
```
{{/markdown}}
- bullets_active_class
- Class name given to the active bullet. Default: 'active'
{{#markdown}}
```js
slide_number_class: 'orbit-slide-number',
```
{{/markdown}}
- slide_number_class
- Class name given to the slide number. Default: 'orbit-slide_number'
{{#markdown}}
```js
caption_class: 'orbit-caption',
```
{{/markdown}}
- caption_class
- Class name given to the caption. Default: 'orbit-caption'
{{#markdown}}
```js
active_slide_class: 'active',
```
{{/markdown}}
- active_slide_class
- Class name given to the active slide. Default: 'active'
{{#markdown}}
```js
orbit_transition_class: 'orbit-transitioning',
```
{{/markdown}}
- orbit_transition_class
- Class name given to ?? Default: 'orbit-transitioning'
{{#markdown}}
```js
bullets: true,
```
{{/markdown}}
- bullets
- Does the slider have bullets visible? Default: true
{{#markdown}}
```js
timer: true,
```
{{/markdown}}
- bullets_container_class
- Does the slider have a timer visible. Default: true
{{#markdown}}
```js
next_on_click: false,
```
{{/markdown}}
- next_on_click
- Default: false
{{#markdown}}
```js
variable_height: false,
```
{{/markdown}}
- variable_height
- Does the slider have variable height images? Default: false
{{#markdown}}
```js
before_slide_change: function() {}
```
{{/markdown}}
- before_slide_change
- Execute a function before the slide changes. Default: function() {}
{{#markdown}}
```js
after_slide_changes: function() {}
```
{{/markdown}}
- after_slide_changes
- Execute a function after the slide changes. Default: function() {}
***
## Real World Example
JavaScript
{{#markdown}}
```js
$(document).foundation({
orbit: {
animation: 'slide',
timer_speed: 1000,
pause_on_hover: true,
animation_speed: 500,
navigation_arrows: true,
bullets: false,
next_on_click: true
}
});
```
{{/markdown}}
HTML
{{#markdown}}
```html
```
{{/markdown}}
***
## Events
You can bind to the following events in your code.
{{#markdown}}
```js
orbit:ready
```
{{/markdown}}
- event
- Fires when the slider has loaded
{{#markdown}}
```js
orbit:before-slide-change
```
{{/markdown}}
- event
- Fires before the slide changes
{{#markdown}}
```js
orbit:after-slide-change
```
{{/markdown}}
- event, orbit
- Fires after a slide transition animation has finished. The
orbit
parameter contains slide_number and total_slides
{{#markdown}}
```js
orbit:after-slide-change
```
{{/markdown}}
- event
- Fires after a slide transition animation has finished. The
orbit
parameter contains slide_number and total_slides
{{#markdown}}
```js
orbit:timer-started
```
{{/markdown}}
- event
- Fires each time the timer is started/resumed
{{#markdown}}
```js
orbit:timer-stopped
```
{{/markdown}}
- event
- Fires each time the timer is paused/stopped
{{!-- End Events Section --}}
Example
Here's an example of how you can bind to these events:
HTML
{{#markdown}}
```html
```
{{/markdown}}
You can then bind using the following markup:
{{#markdown}}
```js
$("#featured1").on("orbit:ready", function(event) {
console.info("ready");
});
$("#featured1").on("orbit:before-slide-change", function(event) {
console.info("before slide change");
});
$("#featured1").on("orbit:after-slide-change", function(event, orbit) {
console.info("after slide change");
console.info("slide " + orbit.slide_number + " of " + orbit.total_slides);
});
$("#featured1").on("orbit:timer-started", function(event, orbit) {
console.info("timer started");
});
$("#featured1").on("orbit:timer-stopped", function(event, orbit) {
console.info("timer stopped");
});
```
{{/markdown}}
***
### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
{{#markdown}}
```scss
@import "foundation/components/orbit";
```
{{/markdown}}