Foundation 4: Use rows in orbit slider

Question

I am using Foundation 4 with the Orbit slider. I want to use it as a content-slider.

Is it possible to put the rows from foundation in the orbit slider without messing up the margins from Orbit?

<ul data-orbit>
        <div class="row">
            <div class="large-7 small-12 columns">
                <h1>Hallo</h1>
            </div>
        </div>
        <div class="row">
            <div class="large-7 small-12 columns">
                <h1>Doei</h1>
            </div>
        </div>
        <img src="img/slider/1.jpg">        
    </ul>

There are 3 slider-items. 2 divs with row classes and 1 full-width image. This example messes with the margins from the class row. I want to add margins so the divs with row classes will align in the middle.

Unknown Unknown · Accepted Answer · 2013-10-30T20:51:37

I'm not sure I understand your question well, but if you want 3 slides (2 with text on the middle of the large screen and 1 with the image) I think this code should work (however I didn't test it):

If you add the .large-centered classes to the <li> tags, they will align the texts to the middle automatically, and you don't have to care about the margins in css.

<div class="row">
  <div class="large-12 columns">
    <div class="orbit-container">
      <ul data-orbit="">
        <li class="row">
          <div class="large-7 large-centered small-12 columns"><h1>Hallo</h1></div>
        </li>
        <li class="row">
            <div class="large-7 large-centered small-12 columns"><h1>Doei</h1></div>
        </li>
        <li><img src="img/slider/1.jpg" alt=""></li>        
      </ul>
    </div>
  </div>
</div>

Foundation 4: Use rows in orbit slider

1 Answers