Foundation 4 and Orbit customization

Question

Is there any technique that allows you to change the structure of the list on window resize?

This is my default markup that shows 4 items on default resolution (980px):

<ul data-orbit data-options="bullets:false; container_class:'rafting-cont'">    
  <li>
    <div>…</div>
    <div>…</div>
    <div>…</div>
    <div>…</div>
  </li>
</ul>

but I want to change it to have only two on resolutions smaller than 768px. Markup should dynamically be changed to:

<ul data-orbit data-options="bullets:false; container_class:'rafting-cont'">
  <li>
    <div>…</div>
    <div>…</div>
  </li>
  <li>
    <div>…</div>
    <div>…</div>
  </li>
</ul>

I have tried to do it via jquery unwrap and wrap functions, but it doesn’t work, since foundation and orbit have already been initialized.

Any ideas how I could do that?

What are you trying to achieve here? Do you mean to split the orbit into two orbits? Or do you want to hide some slides on smaller screen? Splitting the unordered list into two doesn't make sense. — von v.
No, I don't want to split them. I want to show 2 instead of 4 elements on smaller screens. Sorry if the question confused you. On the bigger screens 4 elements are shown. When next/prev is triggered another group of 4 is shown. on smaller screens I want to have groups of 2 by 2 thus the slider will act like a carousel. — bigcat

stacey.mosier stacey.mosier · Accepted Answer · 2013-06-23T21:24:54

are you using the classes .hide-for-small and .show-for-small?

<ul>

    <li>
        <div> item 1 </div>
        <div> item 2 </div>
        <div class="hide-for-small"> item 3 </div>
        <div class="hide-for-small"> item 4 </div>
     </li><!-- end slide-1-a-->

    <li class="show-for-small"> 
        <div> item 3 </div>
        <div> item 4 </div>
     </li><!-- end slide-1-b-->

</ul>

Foundation 4 and Orbit customization

1 Answers