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

【问题标题】：FULLPAGE.JS Get .active slide and update the number on each new slideFULLPAGE.JS 获取 .active 幻灯片并更新每张新幻灯片上的数字
【发布时间】：2017-02-28 15:32:57
【问题描述】：

我正在努力获得

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/

【问题讨论】：

标签： javascript jquery slideshow counter fullpage.js

【解决方案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);
    }
});

2021 年 12 月更新 - fullpage.js v3

现在使用 fullPage.js 提供的新方法 getActiveSlide 和 getActiveSection 更容易。请参阅the docs 了解更多信息。

Codepen online

new fullpage("#fullpage", {
  sectionsColor: ["yellow", "orange", "#C0C0C0", "#ADD8E6"],
  anchors: ["firstPage", "secondPage", "thirdPage", "fourthPage", "lastPage"],
  slidesNavigation: true,
  afterSlideLoad: function (origin, destination, direction) {
    setCounter();
  },
  afterRender: function(){
    setCounter();
  }
});

function setCounter(){
    var sectionItem = fullpage_api.getActiveSection().item;
    var numSlides = sectionItem.querySelectorAll(".fp-slide").length;
    var currentSlideWrapper = document.querySelector(".counter");
    var slideNumber = fullpage_api.getActiveSlide().index + 1;
    currentSlideWrapper.innerHTML = "0" + slideNumber + " / " + numSlides;
}

【讨论】：

谢谢@Alvaro，我刚刚更新了我的 Fiddle，但它看起来不起作用jsfiddle.net/0hLzxrea/68
.num 在部分中，而不是在幻灯片中，就像我想象的那样。在这里查看：jsfiddle.net/0hLzxrea/69 也更新了答案。
非常感谢@Alvaro，你成就了我的一天！只是一个快速的，如果 .num 在#fullpage 之外怎么办？有没有简单的方法来查找和更新它？
是的，只需更改选择器：loadedSlide.closest('.fp-section').find('.num');。如果它解决了您的问题，请接受答案，以便其他人知道。
我唯一的问题是计数器不会在部分更改时刷新/重新启动。

【解决方案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/

【讨论】：