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

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 解决方案？

提前致谢 — 非常感谢您的帮助！如果您需要更多信息，请告诉我。

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>

PHP counter with ACF Flexible fields and Fullpage.js