1

我将 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'
        });

    });
4

1 回答 1

1

一种方法是在页面加载时滚动到该幻灯片（如果该部分不是着陆部分，用户仍然看不到该幻灯片）。为此，您可以使用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 问题论坛中实施的建议。

于 2013-12-22T21:02:31.433 回答