Question

我正在尝试获取

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);
});
}
});

任何帮助都会得到极大的帮助。

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

Answer 1

您应该使用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);
    }
});

Answer 2

我现在在这里，我确信非常接近解决方案。问题仍然是，如果你上一个.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/

FULLPAGE.JS获取.active幻灯片并更新每张新幻灯片上的数字

2 个答案: