Foundation Orbit – Using it in your Posts and Pages

foundation 6 orbit

What is Foundation Orbit?

When you look at a majority of WordPress themes today you will notice that they all include an image slider of some kind. Some themes even offer up to five different sliders. One of the things I like about Foundation for Sites, is it has its own slider you can use. It’s called Foundation Orbit and it is very easy to add to your post or pages.

All you need to do is insert a little HTML, add a few images and some code and you will have a great looking slider in your post or page.

Adding Foundation Orbit To Your Content

  • Here’s a nice little caption…
  • and another little caption…
  • I think this is cool…
  • I love this slider…

Foundation Orbit with Text

  • Orbit Slide Number One

    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.

    This Orbit slide has chill

  • Orbit Slide Number Two

    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.

    This Orbit slide has chill

  • Orbit Slide Number Three

    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.

    This Orbit slide has chill

  • Orbit Slide Number Four

    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.

    This Orbit slide has chill

Foundation Orbit – How to use it

In the example above, the first thing I added were some images via “Add Media” button in the post editor. For the second step I added the necessary HTML for Orbit. I clicked on the “Text” tab in the post editor and added the following html:

<div class="orbit"  data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;" data-swipe="true">

    <button class="orbit-previous hide-for-small-only"><span class="show-for-sr">Previous Slide</span><i class="fa fa-angle-left fa-lg" aria-hidden="true"></i></button><button class="orbit-next hide-for-small-only"><span class="show-for-sr">Next Slide</span><i class="fa fa-angle-right fa-lg" aria-hidden="true"></i></button>

    <ul class="orbit-container">
        <li class="is-active orbit-slide">
        add image here
        <figcaption class="orbit-caption">add caption here if you want it</figcaption>
        </li>
        <li class="orbit-slide">
        add image here
        <figcaption class="orbit-caption">add caption here if you want it</figcaption>
        </li>
        <li class="orbit-slide">
        add image here
        <figcaption class="orbit-caption">add caption here if you want it</figcaption>
        </li>
    </ul>
    <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">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></nav>
</div>

You need to make sure that you add a orbit bullet for every image you use. You can do this by using the following:

</button><button data-slide="GIVE YOUR SLIDE A NUMBER"><span class="show-for-sr">ADD SLIDE DETAILS HERE</span></button></nav>

I then inserted each image in the area where it states “insert image here”. Don’t forget you can add as many list items you want. One other thing I did was changed the default animation effect for the slider. Usually it is set so images slide in from the right. I usually prefer a slider to fade in for images or content. So I changed the default effect to “fade” using the data-options attribute (you can see how I added that in the example above).

Foundation Orbit – Very easy to use

Adding Foundation Orbit to any post or page when using the WP-Forge or TotalPress theme on your site is simple and easy to do. Of course, with literally hundreds of sliders out in the wild you can pick and choose the one you want on your site. What slider do you like to use most?

Read more: Foundation Docs: Orbit

5 thoughts on “Foundation Orbit – Using it in your Posts and Pages

    • Hi Joe,

      Orbit does not have vertical scroll from my understanding, just horizontal. If you need more information on Orbit please refer to the link at the end of the post above.

  1. Hurraaayyy !!! Thank you very much…. now, i can change from orbit to ‘fade’ very quickly, i have looked for ‘how’ to change orbit to FADE, but there is no way, and now i can change it faster with this way, love Foundation very much !! ~cheers… (Indonesian enthusiasm)

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.