Menu icon Foundation
Block Grid to Orbit

I'm looking for the best way to have a block grid that converts to an orbit slider on smaller screens. Any help would be greatly appreciated.

block grid

I'm looking for the best way to have a block grid that converts to an orbit slider on smaller screens. Any help would be greatly appreciated.


Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Hey Kevin!

Check out visibility classes: http://foundation.zurb.com/docs/components/visibility.html

<ul class="small-block-grid-3 hide-for-small">
  <li><img src="path/to/yourImg.jpg" /></li>
  <li><img src="path/to/yourImg.jpg" /></li>
  <li><img src="path/to/yourImg.jpg" /></li>
</ul>

<ul class="example-orbit hide-for-medium-up" data-orbit>
  <li>
    <img src="path/to/yourImg.jpg" alt="slide 1" />
    <div class="orbit-caption"> Caption One. </div>
  </li>
  <li>
    <img src="path/to/yourImg.jpg" alt="slide 2" />
    <div class="orbit-caption"> Caption Two. </div>
  </li>
  <li>
    <img src="path/to/yourImg.jpg" alt="slide 3" />
    <div class="orbit-caption"> Caption Three. </div>
  </li>
</ul>

Wing-Hou Chan over 5 years ago

Hey Kevin!

Check out visibility classes: http://foundation.zurb.com/docs/components/visibility.html

<ul class="small-block-grid-3 hide-for-small">
  <li><img src="path/to/yourImg.jpg" /></li>
  <li><img src="path/to/yourImg.jpg" /></li>
  <li><img src="path/to/yourImg.jpg" /></li>
</ul>

<ul class="example-orbit hide-for-medium-up" data-orbit>
  <li>
    <img src="path/to/yourImg.jpg" alt="slide 1" />
    <div class="orbit-caption"> Caption One. </div>
  </li>
  <li>
    <img src="path/to/yourImg.jpg" alt="slide 2" />
    <div class="orbit-caption"> Caption Two. </div>
  </li>
  <li>
    <img src="path/to/yourImg.jpg" alt="slide 3" />
    <div class="orbit-caption"> Caption Three. </div>
  </li>
</ul>