[英]multiple instances of fullpage.js
我想在一个网站上的两个不同部分使用fullpage.js。 基本上,当单击幻灯片时,它会在主要部分继续之前显示下面的子包装器div以及其自己的部分以垂直滚动。
这是我正在使用的代码。 我试图通过ajax加载它,但我想知道是否有一种更容易的方式我可以忽略。
$("#wrapper").fullpage({
verticalCentered: true,
resize : true,
anchors: ['section1', 'section2', 'section3', 'about'],
//menu:'#menu',
customScroll:true,
onLeave: function(index, nextIndex, direction){
//console.log(index+'|'+nextIndex+'|'+direction);
if (direction == 'down'){
$('.section:nth-child('+index+')').animate({'top':'0%'},0)
$('.section:nth-child('+nextIndex+')').animate({'top':'100%'},0).animate({'top':'0%'},500);
} else {
$('.section:nth-child('+nextIndex+')').animate({'top':'0%'},0);
$('.section:nth-child('+index+')').animate({'top':'0%'},0).animate({'top':'100%'},500).animate({'top':'500%'},0);
}
}
});
然后删除它的代码并添加一个新的包装器:
$(".sub_section").click(function() {
$("#wrapper").fullpage.destroy('all');
if (sub_section_open == false) {
$("#left_border").animate({"borderLeftWidth" : "0px"}, 300);
$("#right_border").animate({"borderRightWidth" : "0px"}, 300);
$("#top_border").animate({"borderTopWidth" : "0px"}, 300, function() {
$("#left_border").hide();
$("#right_border").hide();
$("#top_border").hide();
});
$(".sub_section .letters").slideUp("slow", function(){
$(".sub_section .content").css({'z-index': 1});
});
sub_section_open = true;
$(".btn_sub_section_close").show();
$( "#wrapper" ).load( "section1.html" );
$("#section1").fullpage({
verticalCentered: true,
resize : true,
anchors: ['ssection1', 'ssection2', 'ssection3', 'ssection4'],
menu:'#menu'
});
}
});
有任何想法吗? 谢谢!
fullpage.js只支持一个实例。
它是一个全页插件,它不支持它们,因为它没有意义。 它是整页,所有页面都将是fullpage的一个实例的一部分。
您可以在代码中轻松查看它的证据,例如在此行中 :
$('.fp-section').each(function(index){
页面上的任何部分,无论它使用哪个容器/包装器,都将在一个单页的fullpage实例中处理。
在GitHub上, Fullpage.js已将问题标记为增强 。 所以我们有可能在未来的版本中获得多个实例选项:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.