我正在将fullPage.js用于单个页面的网站。我的部分内容之一是使用水平幻灯片来水平显示幻灯片。我试图弄清楚如何从我的三张幻灯片系列的第二张幻灯片开始。阅读文档后，我了解了如何设置锚点并直接单击该幻灯片，但是当您通过垂直滚动到达该系列时，我希望它从幻灯片2开始。
我以为也许将第二张幻灯片设置为class ='active'可以解决问题，但实际上并没有……会破坏水平幻灯片。这是我明智的html和js ...想知道如果回调函数之一可以工作，但不清楚如何使用它们。
<div class="section" id="section5">
<div class="slide"><div class="wrap"><h1>Hello fullPage.js</h1></div></div>
<div class="slide"><h1>This is an awesome plugin</h1></div>
<div class="slide"><h1>Which enables you to create awesome websites</h1></div>
</div>
这就是我用来初始化函数的...。
$(document).ready(function() {
$.fn.fullpage({
anchors: ['home', 'welcome', 'about', 'services', 'faqs', 'contact'],
menu: '#menu'
});
});
一种方法是在页面加载时滚动到该幻灯片（如果该部分不是登陆页面，则对于用户而言仍然不可见）。为此，您可以使用afterRender回调，然后可以修改scrollSlider插件的功能，以使其公开并可以从外部访问，如此处所述。
然后，您可能会这样：
afterRender: function () {
//getting the 2nd section by the index
var section = $('.section').eq(1);
//moving to starting slide of the 2nd section to the 2nd slide, for example
$.fn.fullpage.scrollSlider(2, 1);
}
无论如何，我都会建议您将其添加为在插件的github问题论坛中实施的建议。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句