Federico Ferrari Federico Ferrari - 1 year ago 110
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.


Answer Source

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

For example:

     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);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download