I'm a happy Fullpage.js user!
I just would love to add a class (.num) that shows the current number of slide / the total number of slides.

I'm using this function that works fine, the problem is that it doesn't update at slide change.

$('.section').each(function(){
    var section = $(this),
    sectionSlides = section.find('.slide'),
    totalItems = sectionSlides.length,
    currentIndex = sectionSlides.filter('.active').index() + 2,
    numContainer = section.find('.num');

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

/

I'm a happy Fullpage.js user!
I just would love to add a class (.num) that shows the current number of slide / the total number of slides.

I'm using this function that works fine, the problem is that it doesn't update at slide change.

$('.section').each(function(){
    var section = $(this),
    sectionSlides = section.find('.slide'),
    totalItems = sectionSlides.length,
    currentIndex = sectionSlides.filter('.active').index() + 2,
    numContainer = section.find('.num');

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

http://jsfiddle/168xofn3/11/

• javascript
• jquery
• fullpage.js

• How do you check if the current slide was changed? – Nikolay Ermakov Commented Oct 11, 2016 at 20:18
• Ehm I don't know, I thought that that .active state was enough. – Federico Commented Oct 11, 2016 at 20:27
• I think you need to identify an event that is triggered when active slide changes. Is it when you click some button, like next or back? After that you will need to place some code into that event handler, when the new active slide will be evident. – Nikolay Ermakov Commented Oct 11, 2016 at 20:56
• I can click an arrow right / left to go to the next / previous slide but I can also just use the keyboard's arrows. Can I just ask you for a hint how to trigger that event? – Federico Commented Oct 12, 2016 at 8:41
• Sure, but can you also post the html and javascript that include those button functionality. – Nikolay Ermakov Commented Oct 12, 2016 at 11:21

2 Answers 2

Three ways:

• Using callbacks such as onSlideLeave.
• Using one of the state classes added by fullPage.js
• Just doing something like $('.fp-section.active').find('.fp-slide.active');

I belive that this code can solve my problem I just have to change that alert maybe?

$('#fullpage').fullpage({
    onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){
        var leavingSlide = $(this);

        //leaving the first slide of the 2nd Section to the right
        if(index == 2 && slideIndex == 0 && direction == 'right'){
            alert("Leaving the fist slide!!");
        }

        //leaving the 3rd slide of the 2nd Section to the left
        if(index == 2 && slideIndex == 2 && direction == 'left'){
            alert("Going to slide 2! ");
        }
    }
});