Fullpage.JS：改變動畫上afterSlideLoad刷卡

背景/問題Fullpage.JS：改變動畫上afterSlideLoad刷卡

當我有6個滑梯的fullpage.js部分。第一張幻燈片是其他5張幻燈片的索引。我設法得到第一個動作（點擊索引中的5個幻燈片鏈接中的任何一個）以加載具有淡入效果的幻燈片（與滑動幻燈片相反）。

但是，一旦任何幻燈片打開，我需要在幻燈片之間切換時進行滑動轉換（通過向左/向右滑動）。現在，相同的效果（淡入/淡出）會覆蓋此轉換。我知道這是因爲我的通用語句只檢查afterSlideLoad中的索引，但不知道如何才能從索引幻燈片中獲取操作才能激活它。

到目前爲止

這是我到目前爲止有：

$('#fullpage').fullpage({ 
    css3: true, 
    // Hide the slides container before the next slide loads 
    onSlideLeave: function(anchorLink, index, slideIndex, direction) { 
     if(index == 3 || index == 4){ 
     $.fn.fullpage.setScrollingSpeed(0); 
     $('.fp-section').find('.fp-slidesContainer').hide(); 
     } 
    }, 

    // Display the slides container by fading it in after the next slide has been loaded. 
    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { 
     if(index == 3 || index == 4){ 
     $('.fp-section').find('.fp-slidesContainer').fadeIn(700); 
     $.fn.fullpage.setScrollingSpeed(SCROLLING_SPEED); 
     } 
    }, 

}

這是我用從索引中去的幻燈片之一。

$(".button1").click(function() { 
    $.fn.fullpage.moveTo('sectino1', 1); //move to index of grills 
    $('.fp-section').find('.fp-slidesContainer').hide(); //hide current slide 
    });

這是我用來在幻燈片之間移動，一旦打開。

$(".slide-left").click(function() { 
    $.fn.fullpage.moveSlideLeft(); 
    $('.fp-section').find('.fp-slidesContainer').hide(); //hide current slide 
    });

JS FIDDLE

https://jsfiddle.net/0hLzxrea/28/

來源

2016-01-31 Dan

對於您提出的任何問題，在jsfiddle或codepen中添加在線問題的複製將增加您獲得答案的機會。 – Alvaro

謝謝@Alvaro：這裏是：https://jsfiddle.net/0hLzxrea/28/ – Dan

你爲什麼不只是使用由fullpage.js提供function silentMoveTo？

我不明白爲什麼你應該添加一個淡入或淡出效果，如果你想要的只是直接滾動到目的地。

Check this out無論如何。那是你要的嗎？

來源

2016-02-01 15:45:37 Alvaro

非常感謝你@Alvaro - 現貨！乾杯! – Dan

感謝您的幫助@alvaro - 我也試圖在每張幻燈片上放上一個關閉按鈕（這會讓您回到索引幻燈片中），但遇到了麻煩。出於某種原因，我無法在jsfiddle上重現：https://jsfiddle.net/0hLzxrea/32/，但在我的網站上，點擊關閉滾動條即可開始。有沒有辦法添加條件，如果目的地幻燈片是索引，那麼沒有滾動？ – Dan

Fullpage.JS：改變動畫上afterSlideLoad刷卡

回答

相關問題