fullPage.js从幻灯片2开始

时间:2013-12-22 11:59:35

标签: javascript jquery fullpage.js

我在单页网站上使用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'
        });

    });

1 个答案:

答案 0 :(得分:1)

执行此操作的一种方法是在页面加载时滚动到该幻灯片(如果该部分不是登录部分,则对用户仍然是不可见的)。为此,您可以使用afterRender回调,然后,您可以修改插件的函数scrollSlider,使其公开,并可以从外部访问详细here

然后你可以这样:

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);
}

无论如何,我建议您将其添加为实施in the github issues forum of the plugin的建议。