fullPage.js 动态幻灯片与 ACF 最后一张幻灯片答案

【问题标题】：fullPage.js dynamical slides with ACF last slidefullPage.js 动态幻灯片与 ACF 最后一张幻灯片
【发布时间】：2015-06-19 11:57:35
【问题描述】：

我正在使用 fullPage.js 和 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>

滑块还有一个向下箭头来显示向下移动，当我到达最后一张幻灯片时，我希望它变成向上箭头图标，如下所示：

   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
    }

如何动态确定fullPage.js的最后一张幻灯片并实现？

编辑

我最终使用了

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

虽然这不是动态的，因为在客户端可以添加幻灯片，所以这不是真正的解决方案。我真的需要一个 fp-viewing-x 类，用于最后一张幻灯片，无论数字是多少。

【问题讨论】：

请注意...使用该循环，您将得到具有相同 id...的 div...
感谢您的提示！诚实的错误

标签： javascript jquery wordpress fullpage.js

【解决方案1】：

除非您使用scrollBar:true，否则请勿使用scrollTop。（有关更多信息，请阅读fullPage.js FAQs）。

改用插件提供的回调，例如afterLoad。

然后检查带有active 类的部分是否是最后一个具有以下内容的部分：

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

或者您甚至可以使用添加到您网站的body 元素的fp-viewing-xxx 类并只处理CSS。（这是我的选择）

【讨论】：

我添加了滚动条，谢谢。我试过用 jquery 实现这个：$(document).ready(function() { if ( $('.section.active').is(':last-child')) { $('span.ion-chevron-down').addClass('ion-chevron-up').removeClass('ion-chevron-down'); } else { $('span.ion-chevron-up').addClass('ion-chevron-down').removeClass('ion-chevron-up'); } }); 但不知何故这不起作用。有什么建议吗？
在this jsfiddle 中重现该问题以进行进一步检查。如果没有它的复制品，我无法为您提供更多帮助。