ACF repeat and Orbit from Foundation

• cuartostudio

• July 16, 2017 at 8:46 am

Hi everybody

I need help with this

<?php if( have_rows('slider') ): ?>
  <div class="orbit" role="region" aria-label="Slider inicio" data-orbit>
    <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 while( have_rows('slider') ): the_row();
          $image = get_sub_field('image');
          ?>
          <li class="is-active orbit-slide">
            <figure class="orbit-figure">
              <img class="orbit-image" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
            </figure>
          </li>
        <?php endwhile; ?>
      </ul>
    </div>

// UNTIL HERE IS OK, but the next I'm confuse. When the first slide is showing, the first button (down) need to have class="is-active" and  data-slide="0". The next buttons need to have data-slide="1", data-slide="2", etc.
And then when the second slide is showing the second button need to have class="is-active"

  <nav class="orbit-bullets">

    <button class="is-active" 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>
 
   </nav>
</div>
<?php endif; ?>

I hope someone can help me with this.

Thank you and have a nice day