display slide number orbit.js foundation 6 zurb

Question

I am currently working with orbit.js slider in Foundation 6 and not seeing an option to display slide number.

Could you advice me on this or share examples please.

Thanks!

Answer 1

Here's an example using jQuery that will change the innerHTML propery of an element with the class .slide-number to the active slide number, and log the active slide number to the console every time the slide changes.

function slideNumber() {
  var $slides = $('.orbit-slide');
  var $activeSlide = $slides.filter('.is-active');
  var activeNum = $slides.index($activeSlide) + 1;
  $('.slide-number').innerHTML = activeNum;
  console.log(activeNum);
}

$('[data-orbit]').on('slidechange.zf.orbit', slideNumber);

Credit: I came up with this answer with the help of this SO post.