全高度滑塊跳過一張幻燈片

我正在使用fullPage.js爲多個全屏幻燈片創建全寬度和高度滑塊。所以我的網站結構就像全高度滑塊跳過一張幻燈片

section#f01 
section#f02 
section#f03.scrollfix 
section#f04

我想跳過section#f03.scrollfix滾動瀏覽網站。用我的鍵盤和/或鼠標滾輪滾動。

來源

2015-04-17 Marian Rick

請您談一下概念不是通常理解'frame'，'第二layer'，'第一layer' ...不容易遵循它。你必須指定你的意思。 – Alvaro

感謝@Alvaro的建議。我試圖只使用「內容」和「幻燈片」，這似乎很常見。 –

*'第二個內容被激活時，我想跳過第8張幻燈片* *什麼？ –

Demo online

如果你想刪除它的負載，然後使用afterRender回調，因爲我在這裏做什麼：

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

    afterRender: function() { 
     removeSection2(); 
    } 
}); 

function removeSection2() { 
    // Move section 2 after the las section 
    $('.fp-section:last').after($('#f02')); 

    //removing the internal class `fp-section` so fullPage.js won't recognise it and won't be able to scroll to it. 
    $('#f02').removeClass('fp-section'); 
}

如果你想在其他任何時刻使用它，只是隨時調用功能removeSection2。

如果你想在某個時候將它還原回來，你可以使用這個其它功能：

function restoreSection2() { 
    // Move all next sections to before the active section 
    $('#f01').after($('#f02')); 
    $('#f02').addClass('fp-section'); 
}

來源

2015-04-21 09:57:54 Alvaro

這似乎是一個非常乾淨的解決方案！非常感謝您的偉大建議！它的一種奇怪，但直到'restoreSection2'我無法使用我的鍵盤導航。這不是一個jsfiddle問題，是嗎？ –

@MarianRick我可以用鍵盤垂直滾動，沒有任何問題。如果您正在談論水平滾動或幻燈片的點擊，那是因爲這些幻燈片位於已移除的部分，而不是第一個幻燈片。我忘了將'position：relative'添加到部分，現在我們移除了包含它的'fp-section'類。 [這是小提琴的修正]（http://jsfiddle.net/97tbk/547/），注意'.section'的新CSS樣式。 – Alvaro

我很抱歉。當然這是一個瘋狂的問題。您需要先在該區域內單擊以使鍵盤正常工作。使用真實網站時不存在此問題！ –

我不知道我得到了你想要達到的目標，所以這是我該如何選擇來解釋你在你的問題中寫道：

在您提供的活生生的例子，可以點擊每個幻燈片上的按鈕「打開」幻燈片。完成後，只要用戶點擊頁面上的導航按鈕或正在使用滾動按鈕，就希望跳過幻燈片＃8。

如果是這種情況，那麼在下面的偵聽器中添加一個幻燈片的onLeave和底部的css結合使得每當類「.scrollfix」出現時跳過幻燈片＃8（也許它應該被重命名爲「.scrollskip」或類似的東西）：

$("#fullpage").fullpage({ onLeave: function(index, nextIndex, direction) { 
    setTimeout(function() { 
    var skip_section = $(".scrollfix").length > 0; 
    if (nextIndex === 8 && skip_section) { 
     if (direction === "down") { 
     $("#fullpage").fullpage.moveSectionDown(); 
     } else { 
     $("#fullpage").fullpage.moveSectionUp(); 
     } 
    } 
    },1); 
} })

的CSS需要進行更新，以隱藏幻燈片完全而不只是使其不可見的：

.scrollfix { 
    display: none!important; 
}

粘貼JS代碼到上面開發工具控制檯同時在您的示例頁面上製作在scrollfix的小改動導致我認爲你尋求的行爲。由於您的代碼中已經有了「onLeave」事件偵聽器，因此在開發工具中添加此修補程序將會破壞默認行爲，但您應該能夠在正確的位置添加代碼以使它們同時工作。

來源

2015-04-20 15:27:30

嘿@johanpersson，非常感謝您的偉大建議。我已經嘗試了此修復程序。從某種意義上說，它的效果很好，但是儘快，當你在最後一張幻燈片上並嘗試「打開它」時，系統就會陷入困境。它更容易讓你嘗試，而不是我解釋。我在這裏更新了代碼：http://img.hiamovi-client.com/index-stack。html 它雖然在最後一張幻燈片中斷開，並嘗試再次「關閉」幻燈片。 –

我看到...要解決這個問題，請在你的「second_layer」函數中加入以下代碼行： $（「＃fullpage」）。fullpage.reBuild（）這將重建幻燈片，事實上，幻燈片8現在不再顯示。否則會發生的事情是，「整頁窗口」認爲總共有9張幻燈片，並且由於該位置本身九個幻燈片向下，實際上它應該只有八個拼接窗口。調用reBuild將解決這個問題。 –

非常感謝@johanpersson，這個作品很棒，作爲一個好主意，很容易整合到我的網站中。我會嘗試添加一些修復，然後給你反饋！感謝您的解釋！ –

全高度滑塊跳過一張幻燈片

回答

相關問題