全高滑块跳过一张幻灯片
Full height slider skip one slide
我正在使用 fullPage.js 为多个全屏幻灯片创建全宽和全高滑块。所以我的网站结构是这样的
section#f01
section#f02
section#f03.scrollfix
section#f04
我想在滚动浏览网站时跳过 section#f03.scrollfix
。通过鼠标滚轮使用键盘 and/or 滚动时。
我不确定我是否得到了你想要的结果,所以我选择这样解释你在问题中写的内容:
在您提供的实例中,可以单击每张幻灯片上的按钮 "open up" 该幻灯片。完成后,您希望在用户单击页面上的导航按钮或使用滚动按钮时跳过幻灯片 #8。
如果是这种情况,那么只要 class“.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 代码粘贴到开发工具控制台中,并对 scrollfix 进行微小的更改会导致我认为您寻求的行为。由于您的代码中已经有一个 "onLeave" 事件侦听器,因此在开发工具中添加此修复将破坏默认行为,但您应该能够在正确的位置添加代码以使它们同时工作时间.
如果您想在加载时删除它,请像我在这里做的那样使用 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');
}
我正在使用 fullPage.js 为多个全屏幻灯片创建全宽和全高滑块。所以我的网站结构是这样的
section#f01
section#f02
section#f03.scrollfix
section#f04
我想在滚动浏览网站时跳过 section#f03.scrollfix
。通过鼠标滚轮使用键盘 and/or 滚动时。
我不确定我是否得到了你想要的结果,所以我选择这样解释你在问题中写的内容:
在您提供的实例中,可以单击每张幻灯片上的按钮 "open up" 该幻灯片。完成后,您希望在用户单击页面上的导航按钮或使用滚动按钮时跳过幻灯片 #8。
如果是这种情况,那么只要 class“.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 代码粘贴到开发工具控制台中,并对 scrollfix 进行微小的更改会导致我认为您寻求的行为。由于您的代码中已经有一个 "onLeave" 事件侦听器,因此在开发工具中添加此修复将破坏默认行为,但您应该能够在正确的位置添加代码以使它们同时工作时间.
如果您想在加载时删除它,请像我在这里做的那样使用 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');
}