带有ACF灵活字段和Fullpage.js的PHP计数器

Question

我希望有人可以帮助我...

我正在开发的Wordpress网站中使用Alvaro Trigo的Fullpage.js和Elliot Condon的ACF Flexible字段。

对于每个灵活的字段条目，我在Fullpage中声明一个新的部分/页面。客户想要一个固定在页面底部的计数器，读数为1 / 10,2 / 10,3 / 10等。

我可以使用

计算字段总数

<?php echo count( get_field('content') ); ?> 

但是，我不确定每次幻灯片更改时如何更新每个数字。我可以用PHP执行此操作还是需要JS解决方案？

Here is the work in progress

提前感谢 - 非常感谢任何帮助！如果您需要更多信息，请与我们联系。

Answer 1

你应该为此寻找Javascript。

使用回调fullpage.js提供诸如afterLoad来根据您可以从afterLoad函数参数中提取的部分索引来更新数字。

这样的事情：

 $('#fullpage').fullpage({
    afterLoad: function(anchorLink, index){
       $('#counter').find('span').html(index + 1);
    }
});

有一个这样的计数器元素：

<div id="counter"><span>1<span>/16</div>