Javascript fullpage.js的多个实例

Javascript fullpage.js的多个实例,javascript,jquery,ajax,fullpage.js,Javascript,Jquery,Ajax,Fullpage.js,我试图在一个网站的两个不同部分使用fullpage.js。基本上,当单击幻灯片时,它会在下面显示一个子包装器div,在主部分继续之前,它有自己的部分可以垂直滚动 这是我正在使用的代码。我试图通过ajax加载它,但我想知道是否有一种更简单的方法我忽略了 $("#wrapper").fullpage({ verticalCentered: true, resize : true, anchors: ['section1', 'section2', 'section3', 'a

我试图在一个网站的两个不同部分使用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只支持一个实例

这是一个完整的网页插件,它不是为了支持他们,因为它没有意义。这是一个完整的页面,所有的页面将是一个完整页面实例的一部分

您可以很容易地在代码中看到它的证据,例如:


页面上的任何部分,无论使用哪个容器/包装器,都将在一个完整页面实例中处理。

在GitHub上。因此,我们有可能在未来的版本中获得多实例选项:)

@DrCord,我想发表评论,但您需要50个声誉才能发表评论。也许你可以把我的评论作为对阿尔瓦罗答案的评论:D
$('.fp-section').each(function(index){