Menu icon Foundation
Foundation 5.2 Content Orbit with grids

I'm trying to create an orbit slider that contains a grid in each slide but I'm having some trouble with it. Looking at the examples it would seem like it's possible to do within a content orbit. Here's an image of the basic idea I'm trying to achieve. I've tried to code it but the row I place in the slider is off center and doesn't have the blue background like in the examples. How would I best go about fixing it?

Also included the code I've tried.

20140311 182730

<ul class="post-orbit-content" data-orbit>
    <li data-orbit-slide="top-posts-1">
        <div class="row">
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, veniam, nihil, ipsam voluptate...</p>
            </article>
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, dignissimos, vitae...</p>
            </article>
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, quod, beatae, laudantium officia...</p>
            </article>
        </div>
    </li>
    <li data-orbit-slide="top-posts-2">
        <div class="row">
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, veniam, nihil, ipsam voluptate...</p>
            </article>
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, dignissimos, vitae...</p>
            </article>
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, quod, beatae, laudantium officia...</p>
            </article>
        </div>
    </li>
    <li data-orbit-slide="top-posts-3">
        <div class="row">
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, veniam, nihil, ipsam voluptate...</p>
            </article>
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, dignissimos, vitae...</p>
            </article>
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, quod, beatae, laudantium officia...</p>
            </article>
        </div>
    </li>
</ul>

5.2Orbitgrid

I'm trying to create an orbit slider that contains a grid in each slide but I'm having some trouble with it. Looking at the examples it would seem like it's possible to do within a content orbit. Here's an image of the basic idea I'm trying to achieve. I've tried to code it but the row I place in the slider is off center and doesn't have the blue background like in the examples. How would I best go about fixing it?

Also included the code I've tried.

20140311 182730

<ul class="post-orbit-content" data-orbit>
    <li data-orbit-slide="top-posts-1">
        <div class="row">
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, veniam, nihil, ipsam voluptate...</p>
            </article>
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, dignissimos, vitae...</p>
            </article>
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, quod, beatae, laudantium officia...</p>
            </article>
        </div>
    </li>
    <li data-orbit-slide="top-posts-2">
        <div class="row">
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, veniam, nihil, ipsam voluptate...</p>
            </article>
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, dignissimos, vitae...</p>
            </article>
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, quod, beatae, laudantium officia...</p>
            </article>
        </div>
    </li>
    <li data-orbit-slide="top-posts-3">
        <div class="row">
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, veniam, nihil, ipsam voluptate...</p>
            </article>
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, dignissimos, vitae...</p>
            </article>
            <article class="large-4 columns">
                <img src="http://placehold.it/120x120" alt="">
                <h2>Post Title</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, quod, beatae, laudantium officia...</p>
            </article>
        </div>
    </li>
</ul>
Rafi Benkual almost 6 years ago

The background was targeted on the li div. You can also center items in a div with css which works well.

Here is an example to get you started (click edit pen) http://cdpn.io/kAxDt