fullPage.js dynamical slides with ACF last slide

Question

I am creating a dynamic full page slider with fullPage.js and Advanced Custom fields plugin for Wordpress.

 <div id="fullpage">
    <?php if(get_field('slide')): ?>
            <?php while(has_sub_field('slide')): ?>
        <div class="section" id="home">
                    <?php the_sub_field('slide_text'); ?>
        </div>
            <?php  endwhile; ?>
    <?php endif; ?>
</div>

The slider also has a down-arrow to show down movement and I would like for it to change to up-arrow icon when I reach the last slide, something like this:

   if($(window).scrollTop() === 0) {
        $('.ion-chevron-up').addClass('ion-chevron-down').removeClass('ion-chevron-up');
   } else if($(window).scrollTop() + $(window).height() >= $(document).height() - 15) {
        $('.ion-chevron-down').addClass('ion-chevron-up').removeClass('ion-chevron-down');  
    } else { 
    // nothing
    }

How can I determine the last slide of fullPage.js dynamically and achieve this?

EDIT

I ended up using

.fp-viewing-1 .ion-chevron-down {
  display: none;
}
.fp-viewing-0 .ion-chevron-up {
  display: none;
}

Although this is not dynamic since on the client side there can be slides added so this is not really the solution. I'd really need a class fp-viewing-x which would be for the last slide, whatever the number would be.

Answer 1

Do not use scrollTop unless you use scrollBar:true .(Read the fullPage.js FAQs for more info).

Use instead the callbacks provided by the plugin such as afterLoad.

Then check that the section with the active class is the last one with something like:

if ( $('.section.active').is(':last-child'))

Or you can even use the class fp-viewing-xxx added to the body element to your site and just deal with CSS. (which would be my option)