The ultimate tool for creating feature-rich, versatile sliders
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.
Highlights
Orbit has long been a staple of the RapidWeaver community, providing site designers the ability to quickly and easily construct various types of sliders for their websites.
This latest version of Orbit, version 2, takes things to the next level. Below we'll look at some samples of Orbit sliders as well as discuss some of the stacks highlights. Further down the page you'll find a walk-thru video as well as documentation regarding each stack setting in the Orbit 2 stack.
Slide types
Orbit allows you to use various forms of content within your sliders. You can choose to have image sliders, video embeds or your own stacks-based content slides. What is even more unique about Orbit is that you can easily mix-and-match these slide types within one slider.
Images
The goto option for sliders has always been Image slides. And for good reason. They allow you to present photographs, info graphics and more in a compelling format. Orbit's unique controls allow for even more impressive image-based displays!
Video
Video is a brilliant medium for so many different uses. It can help you communicate with your visitors more effectively and convey ideas that are hard to in still images. Orbit allows you to include videos, either on their own or mixed in with other slide types.
Other content
Sometimes it is helpful to be able to build out your own content for your individual slides. Orbit allows you to create "Content" slides, which can include stacks addons of your choosing. Mix and match headers, text, images, buttons and more all in one slide!
Remote Images & Alloy Droplets
In addition to normal drag-and-drop image slide type you can also use Remote Images via a URL to the image on your server for a slide. We also offer the ability to use Alloy Droplets as slides, letting you change your slider images directly from the Alloy Editor on your site. These two slide types are included along with the Image, Video and Content child stacks.
Make it your own
Customizing Orbit is both easy and fun. Tweak the settings to get a layout and design that incorporates well into your existing site design. Add padding, borders, background styles and so much more to help put your fingerprint on its form and function.
Custom touch
By varying the number of slides shown at once, as well as using Orbit's Sneak Peek settings, as shown above, you can create distinctive slideshow experiences.
Refined
Adjust the focus of the slider for your visitors, pick a starting slide, and adjust the number of slides that move each time the slider advances.
Sneak Peak
Orbit's Sneak Peek mode allows you to let your visitors see a glimpse of the slides on either side of the active item. We've used this feature in both of the slideshows above, as well as applied some filters to the non-active slides in the second one.
Loop, Slide or Fade
Orbit provides three types of sliders that allow you to achieve different effects for your pages -- Slide, Loop and Fade. Each has unique properties and effects.
Starter styles
Style your Orbit slides using an array of different custom controls. Adjust the padding of your slider as well as the corner roundness and gutters widths at each of the three responsive breakpoints.
Go further
Enable Orbit's Extra Styling features on a per breakpoint basis. These provide you border and background settings for size, color and more and can be applied separately to active and normal slides.
Navigation
Orbit has three forms of navigation for your visitors. We provide the ability to add navigation arrows and pagination dots to your slider. Additionally Orbit has an autoplay feature which auto advances your slides.
We've also built-in the ability to customize the arrows and paginations dots for your sliders at each of the three breakpoints. This allows you to get the right look and feel across multiple device sizes and types.
Filters
Orbit allows you to apply filters to your non-active slides, which in turn allows the current slide to really stand out. You're able to reduce their opacity, as well as apply blur, grayscale, sepia and saturation filters.
More Samples
Images, videos, and stacks, oh my!
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.
John Doe
Title here
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula.
Skills
PHP
CSS
HTML
Jane Doe
Title here
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula.
Skills
PHP
CSS
HTML
Jane Doe
Title here
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula.
Skills
PHP
CSS
HTML
Jill Doe
Title here
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula.
Skills
PHP
CSS
HTML
Jack Doe
Title here
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula.
Skills
PHP
CSS
HTML
Jen Doe
Title here
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula.
Skills
PHP
CSS
HTML
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.
The sky is far from the limit for this stunning slider stack
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!
Phenominal style
Orbit 2's sliders will help you take your site's content and design the the next level -- on course for the moon.
Documentation
What does this setting do?
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.
Requirements
What will you need?
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.
What you need
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:
- RapidWeaver v8 or newer
- Stacks v4 or newer
Works with Foundry
This add-on works great with Foundry v3 as well as the legacy Foundry v2.
Browser support
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:
- Safari
- Firefox
- Chrome
- Edge