Orbit
Orbit is an easy to use, powerful image slider built to be responsive, just like Foundation.
Getting Started
Implementing Orbit is easy, but there are a few things to keep in mind when it comes to using Orbit in its simplest form.
Included Files
First, ensure you're including the Orbit JS and CSS. If you're using the SCSS version of Foundation, these will be part of your environment already, and if you download Foundation as simple CSS the two files will be part of foundation.js and foundation.css, respectively. Also ensure you're including jQuery, also provided as part of any Foundation distribution.
Setting Up Your Slider
Your Orbit slider is simply a div with a unique ID. For our examples we'll use <div id="featured">, an example of which you can see above. The markup looks like this:
Activating Orbit
With your #featured element in place, we just need to call Orbit. Remember: your call to Orbit needs to come after you've included jQuery and foundation.js. By default, those are at the end of your document, so this code snippet should come at the very end:
That's all you need to trigger Orbit on a series of images. It includes the timer element, and the left and right hand paddles.
Options
Orbit has a number of options available, which you can specify when you call .orbit(). In the example above, we kept all of the default values, but you can optionally use any of these options:
Content Sliders
While Orbit was created as a simple image slider, it also supports div elements with arbitrary content. You could have a slider of text blocks, actions, or really anything. Remember: for a content slider to work without any images, you need to specify an aspect ratio when you call .orbit(). As shown in the options above, the option needed is fluid: 16x9 or another ratio.
This is a content slider.
Each slide holds arbitrary content, like text or actions.
We can include text and buttons, like this!
We take no responsibility for what happens if you click this button.
What? You didn't click it?
We'll give you the benefit of the doubt. Maybe you did, and now you're back!
Note: We put some simple styles on our content slider, notably a background and padding on the div elements. Orbit stacks your slides, so transparent slides will will be visible on top of each other.
Graceful Orbit Loading State
Since Orbit executes through Javascript, before it kicks in you might see your images or content all stacked on top of each other. To avoid this you can make use of a property of Orbit: it adds a class of .orbit once it executes, meaning you can target your div#featured with specific styles that will be overriden when the class is added.
For example, if we want Orbit to load a simple light grey screen with a spinner, the CSS would look like this:
We hide the images by default, and give the #featured block a fixed height and background with a spinner. Once Orbit loads the images are displayed and we remove that background.