Orbit

JavaScript Motion UI

An image and content carousel with animation support and many customizable options.

Basics

Orbit doesn't automatically generate any HTML for you, giving you the flexibility to move around the various pieces of the plugin. Here's a complete example—we'll break down the individual pieces farther down.

Please note that apart from Javascript, Motion UI is a dependency for Orbit to work properly. If in case, you don't want any animations within your Carousel, you can always disable the animation.

Watch this part in video

edit on codepen button
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <div class="orbit-wrapper">
    <div class="orbit-controls">
      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    </div>
    <ul class="orbit-container">
      <li class="is-active orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
          <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/888?text=Slide-2" alt="Space">
          <figcaption class="orbit-caption">Lets Rocket!</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/777?text=Slide-3" alt="Space">
          <figcaption class="orbit-caption">Encapsulating</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/666&text=Slide-4" alt="Space">
          <figcaption class="orbit-caption">Outta This World</figcaption>
        </figure>
      </li>
    </ul>
  </div>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0">
      <span class="show-for-sr">First slide details.</span>
      <span class="show-for-sr" data-slide-active-label>Current Slide</span>
    </button>
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
</div>
  • Space
    Space, the final frontier.
  • Space
    Lets Rocket!
  • Space
    Encapsulating
  • Space
    Outta This World

Wrapper

The wrapper houses the entire carousel. We use the aria-label attribute to label what the carousel is, for assistive technology.

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
</div>

Slide Container

The slide container houses each individual slide. In our above markup example, we also placed the buttons in here, so we can anchor them to the center edge of the slide container. However, they can be moved anywhere within the data-orbit wrapper.

Each slide is an <li> with the class .orbit-slide. The first slide is marked with the .is-active class to indicate it's the default. You can place any HTML you want inside of the slide, but we have some premade styles for image-based slides with a caption.

<ul class="orbit-container">
  <li class="orbit-slide is-active">
    <figure class="orbit-figure">
      <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
      <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
    </figure>
  </li>
  <!-- More slides... -->
</ul>

Next/Previous Arrows

Orbit controls use the class .orbit-previous and .orbit-next. The below example has an important accessibility hook: since we're using ASCII arrows for the carousel controls, we add screen reader-only text (wrapped in the class .show-for-sr) that explain what the controls do.

<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span> &#9664;&#xFE0E;</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span> &#9654;&#xFE0E;</button>

Bullets

The bullets serve two purposes: they mark the current slide, and can be clicked on to navigate to another slide. Like with the controls, the bullets can also have screen reader-friendly labels.

<nav class="orbit-bullets">
  <button class="is-active" data-slide="0">
    <span class="show-for-sr">First slide details.</span>
    <span class="show-for-sr" data-slide-active-label>Current Slide</span>
  </button>
  <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
  <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
  <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>

Slide Contents

A carousel slide can contain images or HTML—you can even mix between slides in one carousel!

Watch this part in video

edit on codepen button
<li class="orbit-slide">
  <div>
    <h3 class="text-center">2: You can also throw some text in here!</h3>
    <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
    <h3 class="text-center">This Orbit slider does not use animations.</h3>
  </div>
</li>
  • This is dodgerblue. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • This is rebeccapurple. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • This is darkgoldenrod. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • This is lightseagreen. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Using Animation

Orbit uses Motion UI CSS classes to animate slides around.

Without the inclusion of the `motion-ui` [Motion UI](motion-ui.html) CSS file in your template, Orbit slider fails to work properly.

There are four plugin options you can set to change the default effects:

  • data-anim-in-from-left: transition to play when a slide comes in from the left.
  • data-anim-in-from-right: transition to play when a slide comes in from the right.
  • data-anim-out-to-left: transition to play when a slide comes out to the left.
  • data-anim-out-to-right: transition to play when a slide comes out to the right.

Since those option names are pretty long, you can also set them all in one HTML attribute, using data-options:

edit on codepen button
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
</div>
  • Space
    Space, the final frontier.
  • Space
    Lets Rocket!
  • Space
    Encapsulating
  • Space
    Outta This World

Disabling Animation

To disable Motion UI, set the plugin option useMUI to false. Written as an HTML attribute, that's data-use-m-u-i="false".

edit on codepen button
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
</div>
  • Space
    Space, the final frontier.
  • Space
    Lets Rocket!
  • Space
    Encapsulating
  • Space
    Outta This World

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$orbit-bullet-background Color $medium-gray

Default color for Orbit's bullets.

$orbit-bullet-background-active Color $dark-gray

Default active color for Orbit's bullets.

$orbit-bullet-diameter Number 1.2rem

Default diameter for Orbit's bullets.

$orbit-bullet-margin Number 0.1rem

Default margin between Orbit's bullets.

$orbit-bullet-margin-top Number 0.8rem

Default distance from slide region for Orbit's bullets.

$orbit-bullet-margin-bottom Number 0.8rem

Default bottom margin from Orbit's bullets to whatever content may lurk below it.

$orbit-caption-background Color rgba($black, 0.5)

Default background color for Orbit's caption.

$orbit-caption-padding Number 1rem

Default padding for Orbit's caption.

$orbit-control-background-hover Color rgba($black, 0.5)

Default background color for Orbit's controls when hovered.

$orbit-control-padding Number 1rem

Default padding for Orbit's controls.

$orbit-control-zindex Number 10

Default z-index for Orbit's controls.


Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

orbit-wrapper

@include orbit-wrapper;

Adds styles for the outer Orbit wrapper. These styles are used on the .orbit class.


orbit-container

@include orbit-container;

Adds styles for the inner Orbit slide container. These styles are used on the .orbit-container class.


orbit-slide

@include orbit-slide;

Adds styles for the individual slides of an Orbit slider. These styles are used on the .orbit-slide class.


orbit-image

@include orbit-image;

Adds styles for a slide containing an image. These styles are used on the .orbit-image class.


orbit-caption

@include orbit-caption;

Adds styles for an orbit slide caption. These styles are used on the .orbit-caption class.


orbit-control

@include orbit-control;

Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the .orbit-next and .orbit-previous classes in the default CSS.


orbit-previous

@include orbit-previous;

Adds styles for the Orbit previous button. These styles are used on the .orbit-previous class.


orbit-next

@include orbit-next;

Adds styles for the Orbit next button. These styles are used on the .orbit-next class.


orbit-bullets

@include orbit-bullets;

Adds styles for a container of Orbit bullets. Adds styles for the Orbit previous button. These styles are used on the .orbit-bullets class.


JavaScript Reference

Initializing

The following files must be included in your JavaScript to use this plugin:

  • foundation.core.js
  • foundation.orbit.js
    • With utility library foundation.util.keyboard.js
    • With utility library foundation.util.motion.js
    • With utility library foundation.util.timer.js
    • With utility library foundation.util.imageLoader.js
    • With utility library foundation.util.touch.js

Foundation.Orbit

Creates a new instance of an orbit carousel.

var elem = new Foundation.Orbit(element, options);
NameTypeDescription
element jQuery jQuery object to make into an Orbit Carousel.
options Object Overrides to the default plugin settings.

Plugin Options

Use these options to customize an instance of Orbit. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

Name Type Default Description
data-bullets boolean true Tells the JS to look for and loadBullets.
data-nav-buttons boolean true Tells the JS to apply event listeners to nav buttons
data-anim-in-from-right string slide-in-right motion-ui animation class to apply
data-anim-out-to-right string slide-out-right motion-ui animation class to apply
data-anim-in-from-left string slide-in-left motion-ui animation class to apply
data-anim-out-to-left string slide-out-left motion-ui animation class to apply
data-auto-play boolean true Allows Orbit to automatically animate on page load.
data-timer-delay number 5000 Amount of time, in ms, between slide transitions
data-infinite-wrap boolean true Allows Orbit to infinitely loop through the slides
data-swipe boolean true Allows the Orbit slides to bind to swipe events for mobile, requires an additional util library
data-pause-on-hover boolean true Allows the timing function to pause animation on hover.
data-accessible boolean true Allows Orbit to bind keyboard events to the slider, to animate frames with arrow keys
data-container-class string orbit-container Class applied to the container of Orbit
data-slide-class string orbit-slide Class applied to individual slides.
data-box-of-bullets string orbit-bullets Class applied to the bullet container. You're welcome.
data-next-class string orbit-next Class applied to the `next` navigation button.
data-prev-class string orbit-previous Class applied to the `previous` navigation button.
data-use-m-u-i boolean true Boolean to flag the js to use motion ui classes or not. Default to true for backwards compatibility.

Events

These events will fire from any element with a Orbit plugin attached.

NameDescription
beforeslidechange.zf.orbit Triggers before the next slide starts animating in and only if a next slide has been found.
slidechange.zf.orbit Triggers when the slide has finished animating in.

Methods

geoSync

$('#element').foundation('geoSync');

Sets a timer object on the orbit, and starts the counter for the next slide.


_reset

$('#element').foundation('_reset');

Resets Orbit so it can be reinitialized


changeSlide

$('#element').foundation('changeSlide', isLTR, chosenSlide, idx);

Changes the current slide to a new one.

Fires these events: Orbit#event:slidechange

NameTypeDescription
isLTR Boolean if true the slide moves from right to left, if false the slide moves from left to right.
chosenSlide jQuery the jQuery element of the slide to show next, if one is selected.
idx Number the index of the new slide in its collection, if one chosen.

_destroy

$('#element').foundation('_destroy');

Destroys the carousel and hides the element.