Federico Ferrari Federico Ferrari - 1 month ago 29
jQuery Question

FULLPAGE.JS Get .active slide and update the number on each new slide

I'm trying to get the

current slide / total slides


on Fullpage.js and get the current slide updated everytime the slide changes.

I'm a total newbie on Javascript and I'm trying to work around this code. The numbers appear but they do not update every slide change.

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


Any help would be greatly apprciated.

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

Answer

You should be makeing use of the fullPage.js callbacks, such as onSlideLeave or afterSlideLoad.

For example:

$('#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);
    }
});