Foundation 6 Orbit – Using it in your posts and pages

foundation 6 orbit

Foundation 6 Orbit Is an image and content carousel with animation support and many customizable options.
Foundation

Post updated July 5th, 2016

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 6 is it has its own slider you can use. Its 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 Foundation 6 Orbit slider.

Adding Foundation 6 Orbit To Your Content

  • foundation 6 orbit
    Here’s a nice little caption…
  • foundation 6 orbit
    and another little caption…
  • foundation 6 orbit
    I think this is cool…

Foundation 6 Orbit – How to use it

In the Foundation 6 Orbit 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 any 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). Also, when the third slide fades in, if you hover over it, you will notice that I linked it to WordPress.org and it will open in a new window when clicked.

Foundation 6 Orbit – Very easy to use

As you can see adding Foundation 6 Orbit slider to any post or pages when using WP-Forge on your web 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 6 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