Question

我正在尝试将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'
        });
    }
});

有什么想法吗？谢谢！

Answer 1

fullpage.js只支持一个实例。

这是一个全页插件，并不支持它们，因为它没有意义。它是整页，所有页面都是整页实例的一部分。

您可以在代码中轻松查看证据，例如in this line：

$('.fp-section').each(function(index){

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

Answer 2

在GitHub上，Fullpage.js has labeled the issue as enhancement。所以我们有可能在未来的版本中获得多个实例选项:)

fullpage.js的多个实例

2 个答案: