Foundation-sites: Multiple Images In Orbit Slider

[garethredfern]

Is it possible to have multiple images display in the Orbit slider at once to fill the area, say for a product carousel?

Twitter Bootstrap offers this functionality by simply adding a class:

http://stackoverflow.com/questions/12518412/twitter-bootstrap-responsive-carousel-with-multiple-items

[mhayes]

This is possible with Orbit. Here's an example of how you could accomplish this:

<ul id="featured1" data-orbit>
  <li>
    <img src="http://placehold.it/100x100&text=img1" style="float:left; padding-right:5px;" />
    <img src="http://placehold.it/100x100&text=img2" style="float:left; padding-right:5px;" />
    <img src="http://placehold.it/100x100&text=img3" style="float:left; padding-right:5px;" />
  </li>
  <li>
    <img src="http://placehold.it/100x100&text=img1" />
    <div class="orbit-caption">
      Caption One.
    </div>
  </li>
</ul>

Happy coding!

[azeemhassni]

This is possible with Orbit. Here's an example of how you could accomplish this:

<ul id="featured1" data-orbit>
  <li>
    <img src="http://placehold.it/100x100&text=img1" style="float:left; padding-right:5px;" />
    <img src="http://placehold.it/100x100&text=img2" style="float:left; padding-right:5px;" />
    <img src="http://placehold.it/100x100&text=img3" style="float:left; padding-right:5px;" />
  </li>
  <li>
    <img src="http://placehold.it/100x100&text=img1" />
    <div class="orbit-caption">
      Caption One.
    </div>
  </li>
</ul>

Happy coding!

Then how'd you make this slider to show different number of slides on mobile?