Question

Fullpage.js非常适合我为这个项目所需的一切。需要具有带有背景图像的完整页面大小的幻灯片。一些大胆的文字。

但是，在每张全尺寸幻灯片之间，我需要提供包含其他信息的简单内容（不是整页）。

示例中的“一个部分”看起来就像我需要的那样，但是不允许在它之后出现任何fullpage.js。

我已禁用自动滚动功能，因此这不是问题。只是无法弄清楚如何在每张幻灯片之间添加“普通HTML部分”。

Answer 1

该插件不会以这种方式工作。您可以做的就是将scrollOverflow用作in this example。

但是，如果你想要一个解决方法，我做了这个丑陋的黑客：

var cont = 0;

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
     afterLoad: function(anchorLink, index){

        if(index == 2 && !cont){
            cont++;
            $.fn.fullpage.setAllowScrolling(false);
            $.fn.fullpage.setAutoScrolling(false);

            var dTop = $('#fullpage').find('#section2').position().top;
            $('#fullpage').css('top', -dTop);

           $("html, body").animate({ scrollTop: 0 },1);
        }
     },
});

Live demo

Answer 2

非常感谢上面的答案，但是在尝试了一些不同的东西后，我找到了一个简单的解决方案。我没有把单个幻灯片/部分弄乱，而是将#fullpage变成了一个类并多次使用它。

从技术上讲，您可以多次使用ID而不进行任何其他更改并且它可以正常工作，但这违反惯例，因此我对其进行了其他更改以识别.fullpage。即。

＆＃13;

<div class="fullpage">
	<div class="section" id="section1"><h1>Full Page 'Section'</h1></div>
</div>
<div class="plainContentHere">
	Any HTML can be entered here
</div>
<div class="fullpage">
	<div class="section" id="section2"><h1>Another Full Page 'Section'</h1></div>
</div>
<div class="plainContentHere">
	Any HTML can be entered here
</div>

＆＃13;

似乎fullpage本来是一个单一的容器，但是autoScroll设置为off，似乎就像我需要的那样工作。

Fullpage.js - 在“幻灯片”之间添加正常内容的部分

2 个答案: