FULLPAGE.JS獲取。主動幻燈片和更新每一個新的幻燈片

-1

current slide/total slides

上Fullpage.js

，並得到更新，每次滑的改變當前幻燈片。

我是一個JavaScript的總新手，我試圖解決這個代碼。數字出現，但不會更新每次幻燈片更改。

$(function() { 

var sections = $('.section'); 
updateCurrentIndex(); //on document.ready and on each slidechange 
function updateCurrentIndex() { 
sections.each(function() { 
    var section = $(this), 
    sectionSlides = section.find('.slide'), 
    totalItems = sectionSlides.length, 
    currentIndex = sectionSlides.filter('.active').index() + 1, 
    numContainer = section.find('.num'); //assuming you have numContainers in every section 

    numContainer.html("0" + currentIndex + '/' + totalItems); 
}); 
} 
});

任何幫助將大大apprciated。

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

來源

2016-10-19 Federico

你應該makeing使用fullPage.js回調，如onSlideLeave或afterSlideLoad的。

例如：

$('#fullpage').fullpage({ 
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 

    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){ 
     var loadedSlide = $(this); 
     var totalItems = loadedSlide.siblings().length; 
     var numContainer = loadedSlide.closest('.fp-section').find('.num'); 
     numContainer.html("0" + slideIndex + '/' + totalItems); 
    } 
});

來源

2016-10-19 14:27:54 Alvaro

感謝@Alvaro，我剛剛更新了我的小提琴，它看起來像它不工作https://jsfiddle.net/0hLzxrea/68/ – Federico

的.num是在部分，而不是像我之前那樣在幻燈片中。看看這裏：https://jsfiddle.net/0hLzxrea/69/也更新了答案。 – Alvaro

非常感謝你@阿爾瓦羅，你讓我的一天！只是一個快速的，如果.num在#fullpage之外怎麼辦？有沒有簡單的方法來查找和更新它？ – Federico

我在這裏的那一刻，我敢肯定非常接近的解決方案。問題仍在於，如果你走到前面的.section，計數器將始終爲01/XX，而不是顯示實際的.active滑動的編號。

afterLoad: function(index, nextIndex, direction) { 
    var loadedSlide = $(this); 
    var slideIndex = find(".fp-slide .active") + 1; 
    var totalItems = loadedSlide.closest(".fp-section").find(".fp-slide").length; 
    var numContainer = loadedSlide.closest(document).find(".num"); 
    numContainer.html("0" + slideIndex + "/" + "0" + totalItems); 
}, 
onLeave: function(index, nextIndex, direction) { 
    var section = $(this), 
    sectionSlides = section.find(".slide"), 
    totalItems = sectionSlides.length, 
    currentIndex = sectionSlides.filter(".fp-slide .active").length + 1, 
    numContainer = section.closest(document).find(".num"); 
    numContainer.html("0" + currentIndex + '/' + "0" + totalItems); 
} 
}) 
});

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

來源

2016-10-20 07:03:21 Federico

FULLPAGE.JS獲取。主動幻燈片和更新每一個新的幻燈片

回答

相關問題