--- title: Orbit layout: doc/layouts/default.html --- # Orbit

Orbit is an easy, powerful, responsive image slider that allows users to swipe on touch-enabled devices.

*** {{> 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.

HTML

{{#markdown}} ```html Goto Slide 1 Goto Slide 2 Goto Slide 3 ``` {{/markdown}}

Rendered HTML

Goto Slide 1 Goto Slide 2 Goto Slide 3 {{> examples_orbit_content}}
*** ## 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}}
 

Code Example

Description


{{#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

Here's an example of a customized Orbit container.

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.

Events

Description


{{#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}}