javascript - 显示幻灯片编号 orbit.js foundation 6 zurb

Question

我目前在 Foundation 6 中使用 orbit.js slider ，但没有看到显示幻灯片编号的选项。

你能给我一些建议或分享例子吗。

谢谢!

Answer 1

这是一个使用 jQuery 的示例，它会将类为 .slide-number 的元素的 innerHTML 属性更改为事件幻灯片编号，并记录事件幻灯片编号每次幻灯片更改时到控制台。

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);

来源: 我在 this SO post 的帮助下得出了这个答案.