全高滑块跳过一张幻灯片

Question

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

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

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

Answer 1

在线演示

如果你想在加载时删除它，那么像我在这里做的那样使用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。

如果是这样的话，那么只要类".sollfix"存在(也许它应该重命名为".sollskip"或类似的东西)，就可以添加下面的幻灯片onLeave监听器和底部的css，使整页跳过幻灯片#8：

$("#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"事件侦听器，在开发工具中添加此修复程序将破坏默认行为，但您应该能够在正确的位置添加代码，使它们同时工作。