显示幻灯片编号orbit.js基础6 zurb

Question

我目前正在使用Foundation 6中的orbit.js滑块,而没有看到显示幻灯片编号的选项.

你能就此提出建议或分享一些例子吗？

谢谢!

Answer 1

下面是一个使用jQuery的示例,它将使用innerHTML类.slide-number将元素的属性更改为活动幻灯片编号,并在每次幻灯片更改时将活动幻灯片编号记录到控制台.

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

信用:我在这篇SO帖子的帮助下想出了这个答案.