Trying to use the orbit slider from foundation
div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<?php
$images = get_field('gallery');
if( $images ): ?>
<div class="orbit-wrapper">
<div class="orbit-controls">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
</div>
<ul class="orbit-container">
<?php foreach( $images as $image ): ?>
<li class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">
<figcaption class="orbit-caption">Lets Rocket!</figcaption>
</figure>
</li>
<?php endforeach; ?>
</ul>
</div>
<nav class="orbit-bullets">
<button data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
<?php endif; ?>
</div>
The images show, but on the 2nd image it still shows the first. Can’t work out where i am going wrong..
