PHP counter with ACF Flexible fields and Fullpage.js

2 Views

I’m hoping someone can help me…

I am using Alvaro Trigo’s Fullpage.js and Elliot Condon’s ACF Flexible field within a WordPress site I’m developing.

Read More

For each flexible field entry I declare a new section / page within Fullpage. The client would like a counter fixed to the bottom of the page, which reads 1/10, 2/10, 3/10 etc.

I am able to count the total number of fields, using 

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

However, I am unsure how to update each number every time the slide changes. Can I do this with PHP or is a JS solution needed?

Here is the work in progress.

Thank you in advance — Any help will be much appreciated! Please let me know if you need any more information.

Post Views: 2

Related posts

1 comment

  1. You should go for Javascript for that.

    Use the callbacks fullpage.js provides such as afterLoad to update the number based on the section index which you can extract from the afterLoad function params.

    Something like this:

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

    Having a counter element like this:

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

Comments are closed.