Photo carousels, page banners, client testimonials, photography, video embeds and so much more! No matter your use, Orbit provides you with a huge array of settings and controls to help with perfecting your site's slideshows.
We've looked at a few slideshow types above, but let's keep going! Below we'll look at some more of the stunning sliders that you can create with Orbit 2 using various types of content. We've built out some samples using not just images, but videos and other stacks-based content as well.
SAMPLE ONE
In this slider we've gone back to basics. A standard slider that shows just one image at a time, using a graceful fade effect. We've enabled autoplay, but you can also navigate through the slides by clicking the arrows.
Note: Padding for the slider, along with a few other features, are disabled for Fade mode. This is due to the way Fade sliders work.
SAMPLE TWO
Here we've created a slideshow that contains video embeds instead of images. When building a slider like this you can use embeds from either YouTube or Vimeo. We can also mix video embed slides in with other slide type such as images or content slides as well.
SAMPLE THREE
This sample shows how we can use other stacks within the Orbit slider. In this case, since we're using Foundry for our page, I've included a Display stack in each slide. Display is nice in that is allows us content and an image combined, so I've created a nice "Our Team" slider for an imaginary About Us page. We've added some Margins stacks to help make sure the Display stacks shadow is not cropped off as well as adjusted several settings within Orbit to give our slider a unique look.
SAMPLE FOUR
For our fourth sample slider we've simply created a slider filled with Foundry Banner stacks to make a banner-like display that you might see at the top of a home page or eCommerce store. We've mixed and matched some columns, buttons and paragraphs to make a nice layout and repeated it in each slide (though you could alter it from slide to slide if you like), and swapped out images for each Banner's background.
We've done our best to show off some of what Orbit 2 can do in the samples throughout this page. There's just no way we could give an example of every combination and iteration available to you with this stack though! We're excited to see what sorts of beautiful slideshows you build for your sites, as the possibilities seem boundless!
Below we have created an overview walk-thru and tutorial video to give you more insight into Orbit 2, as well as to give you a bit of guidance when building out your pages. Like, for instance -- maybe don't include 20 slideshows on one page. That's a lot. I mean, right? Look at this page!
In addition to the tutorial walk through video above we also offer detailed documentation for each setting within this stack.
You can find the full documentation and tutorials for Orbit, as well as all of our other products in the Elixir Support Hub.
This stack relies on the Stacks API to load icons and other tools needed for features in this stack. Let's look at the required software as well as the browser support for this stack.
As mentioned, we use the latest Stacks API for this stack to help facilitate its functionality. You'll need the following tools to make use of it for your site:
This add-on works great with Foundry v3 as well as the legacy Foundry v2.
This stack is designed with modern browsers in mind to give your visitors the best experience possible. It will work nicely in the most recent versions of these browsers: