2013-12-22 40 views
1

我對單個頁面網站使用了fullPage.js。我的一個部分使用水平幻燈片來水平顯示幻燈片。我試圖弄清楚如何讓它在我的三個幻燈片系列的第二張幻燈片中開始。閱讀文檔,我瞭解如何設置錨點並直接單擊該幻燈片,但我希望在通過垂直滾動到達該系列時從幻燈片2開始。fullPage.js從幻燈片2開始

我想也許設置第二張幻燈片的類='積極'會做的伎倆,但它不......事實上,打破水平幻燈片。這是我有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

一種方式做到這一點,將滾動到頁面加載該幻燈片(這仍然是看不見的對於用戶,如果該部分不是着陸的那部分)。爲此,您可以使用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的建議。

+0

我會試試看看它是如何發展的。感謝您的迴應。 – TJnTN