全高度滑块跳过一张幻灯片

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结合使得每当类“.scrollfix”出现时跳过幻灯片＃8（也许它应该被重命名为“.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代码到上面开发工具控制台同时在您的示例页面上制作在scrollfix的小改动导致我认为你寻求的行为。由于您的代码中已经有了“onLeave”事件侦听器，因此在开发工具中添加此修补程序将会破坏默认行为，但您应该能够在正确的位置添加代码以使它们同时工作。