全高滑块跳过一张幻灯片

Question

我正在使用 fullPage.js 为多个全屏幻灯片创建一个全宽和全高滑块。所以我的网站结构是这样的

section#f01
section#f02
section#f03.scrollfix
section#f04

我想在浏览网站时跳过section#f03.scrollfix。使用键盘和/或鼠标滚轮滚动时。

Answer 1

Demo online

如果您想在加载时将其删除，请使用 afterRender 回调，就像我在这里所做的那样：

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],

    afterRender: function () {
        removeSection2();
    }
});

function removeSection2() {
    // Move section 2 after the las section
    $('.fp-section:last').after($('#f02'));

    //removing the internal class `fp-section` so fullPage.js won't recognise it and won't be able to scroll to it.
    $('#f02').removeClass('fp-section');
}

如果您想在其他任何时候使用它，只需随时调用函数removeSection2。

如果你想在某个时候恢复它，你可以使用这个其他功能：

function restoreSection2() {
    // Move all next sections to before the active section
    $('#f01').after($('#f02'));
    $('#f02').addClass('fp-section');
}

Answer 2

我不确定我得到了你想要达到的目标，所以我选择这样解释你在问题中写的内容：

在您提供的实时示例中，可以单击每张幻灯片上的按钮以“打开”该幻灯片。完成后，您希望在用户单击页面上的导航按钮或使用滚动按钮时跳过幻灯片 #8。

如果是这种情况，那么为幻灯片的 onLeave 添加以下侦听器并结合底部的 css 会使整页跳过幻灯片 #8，只要存在“.scrollfix”类（也许应该将其重命名为“ .scrollskip" 或类似的东西）：

$("#fullpage").fullpage({ onLeave: function(index, nextIndex, direction) {
  setTimeout(function() {
    var skip_section = $(".scrollfix").length > 0;
    if (nextIndex === 8 && skip_section) {
      if (direction === "down") {
        $("#fullpage").fullpage.moveSectionDown();
      } else {
        $("#fullpage").fullpage.moveSectionUp();
      }
    } 
  },1);
} })

需要更新 CSS 以完全隐藏幻灯片，而不是让它不可见：

.scrollfix {
  display: none!important;
}

在您的示例页面上将上面的 JS 代码粘贴到开发工具控制台中并对滚动修复进行微小的更改会导致我认为您寻求的行为。由于您的代码中已经有一个“onLeave”事件侦听器，因此在开发工具中添加此修复程序会破坏默认行为，但您应该能够将代码添加到正确的位置以使它们同时工作。