jqueryfullpage.js

Fullpage.js: Next and Previous buttons

I have two buttons: #btn1 and #btn2; and I want them to go back and forth when clicked. So #btn1 must go to previous slide and when I click #btn2 it goes to the next slide.

I use fullPage.js for slides.

In documentation says that must me use this

$.fn.fullpage.moveSlideUp();
$.fn.fullpage.moveSlideDown();

But I'm amateur with Javascript. Can you help me?

Solution

  • Just add this:

    $('#button1Id').click(function(){
    $.fn.fullpage.moveSectionDown();
});


$('#button2Id').click(function(){
    $.fn.fullpage.moveSectionUp();
});

    And better also to use the option fixedElements just in case:

    $.fn.fullpage({
    fixedElements: '#button1Id, #button2Id'
});

    You can read more about the fixedElements option in the fullpage.js docs.

    UPDATE

    If you are using fullpage.js > 2.X then you don't need to use the option fixedElements. Just using a wrapper for the plugin and placing the fixed elements outside the wrapper will work fine if you add the fixed positioned styling in your CSS.

    Example online