Orbit get current slide number

I’m new to Foundation 6. I’m working on a slideshow using Orbit. I’d like to show the current slide number just below the slider. In the code below, I have 1 of 8 listed. I’d like to change the number 1 to increase to the next number “2, 3, and so on” as the slider progresses. Anyone have any suggestions on how to accomplish this?

Here’s the block of code I’m working with.

<div class="medium-6 cell orbit-controls orbit-controls-property align-right">
     <button class="orbit-previous orbit-previous-property"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
     <div class="orbit-caption-property-count">1 of 8</div>
     <button class="orbit-next orbit-next-property"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
</div>

Thanks, Mike

I got this figured out with a little help from a post over at Stackoverflow.

Here’s what I did if anyone else is interested.

The HTML

<div class="medium-6 cell orbit-controls orbit-controls-property align-right">
            <button class="orbit-previous orbit-previous-property"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
            <div class="orbit-caption-property-count"><div class="slider-number">1 of 3</div></div>
            <button class="orbit-next orbit-next-property"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
          </div>
          </div>

The JS

(function() {
    function slideNumber() {
        var totalItems = $('li.orbit-slide').length;
        var currentItem = $('li.orbit-slide.is-active').index() + 1;
        $('.slider-number').html(currentItem + ' of ' + totalItems);
    }
    document.addEventListener("DOMContentLoaded", function() {
        $('[data-orbit]').on('slidechange.zf.orbit', slideNumber);
    });
})();

Mike

2 Likes

Exactly, this is the right solution.
Actually you don’t need the DOMContentLoaded part, you can directly listen on the slidechange event (optionally in a ready event check).