Question

我正在为Wordpress创建一个带有fullPage.js和高级自定义字段插件的动态整页滑块。

   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
    }

滑块还有一个向下箭头以显示向下移动，我希望它在我到达最后一张幻灯片时更改为向上箭头图标，如下所示：

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

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

修改

我最终使用

 for item in data:
     for proj in item:
         print proj.get('id')

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

Answer 1

除非您使用scrollTop，否则请勿使用scrollBar:true。（有关详情，请参阅fullPage.js FAQs）。

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

然后检查带有active类的部分是否是最后一部分，如：

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

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

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

1 个答案: