CODEWITHSUNDEEP
javascriptjqueryfullpage.js
GoldSpy98
GoldSpy98

Reputation: 93

Change fullPage.js Options on Events

I am making a website using fullPage.js, I am in need to have a set of options on the first section only, I mean, in the first section I want to have a fullPage option set to true and in the second section I want it set to false, for that I am using fullPage events, altough seems like the options can not be changed on events, so I am asking for a method to do that.

My Java Script code, look at the afterLoad and onLeave events, I want slidesNavigation option to be changed:

$(document).ready(function() {
    $('#fullpage').fullpage({
        sectionsColor: ['#7396FF', '#FFFFFF'],
        controlArrows: false,

        afterLoad: function(anchorLink, index){
            if(index == 1){
                slidesNavigation: true,
            }
        },

        onLeave: function(index, nextIndex, direction){
            if(index == 1){
                slidesNavigation: false,
            }
        }
    });
});

Thanks in advance.

Upvotes: 2

Views: 3513

Answers (1)

Alvaro
Alvaro

Reputation: 41595

You can not change options in that way.

If you dont want to show the slides navigation just hide it with jquery or with CSS.

I would recommend you to check this video about how to take advantage of the CSS class added to the body depending on the section you are in.

You could do it in this way as well, taking into account that the class active is added to the active section in the viewport.

#section2.active .fp-slidesNav{
    display:none;
}

Online demo

Or by using events:

$(document).ready(function() {
    $('#fullpage').fullpage({
        sectionsColor: ['#7396FF', '#FFFFFF'],
        controlArrows: false,

        onLeave: function(index, nextIndex, direction){
            if(nextIndex == 2){
                $('#section2').find('.fp-slidesNav').hide();
            }
        }
    });
});

Online demo

Upvotes: 1

Related Questions