sorry for opening up an old post, but I was stuggling with the same problem, and solved it.
I've also used the shown code on foundation.zurb.com docs. It just doesn't work.
It started working as soon as I removed the class
attribute from the <ul>
and using data-orbit
.
After that, I noticed that in the example, they show html for the prev and next buttons, and for the bullets. You don't need that to place in your code. It's redundant and will interfere with the generated controls.
So, long story short, my slider ended up like this:
<div class="row">
<div class="large-12">
<ul data-orbit>
<li>
<img src="http://lorempixel.com/1200/1200" alt="slide 1">
<div class="orbit-caption">
Caption 1
</div>
</li>
<li>
<img src="http://lorempixel.com/1200/800" alt="slide 2">
<div class="orbit-caption">
Caption 2
</div>
</li>
<li>
<img src="http://lorempixel.com/800/1200" alt="slide 3">
<div class="orbit-caption">
Caption 3
</div>
</li>
</ul>
</div>
</div>
So notice: NO class on your <ul>
, that seems to be the solution. At least it was in my case.