Using fullpage.js - Is it possible to have the elements on each slide load in sequentially?

Question

I'm using fullpage.js to create a http://www.apple.com/uk/iphone-5s/ like effect.

It's working fine however I need to fade a bunch of separate elements sequentially on the slides but only once the respective elements slide had been selected/activated.

I believe the best way to do this is setting the elements to onLoad on a select viewport, except whenever I attempt to do this I seem to be running into jQuery conflict issues with fullpage-js or vice versa.

Can anyone recommend a solution?

Thanks

Answer 1

If what you are trying it so execute some code for each slide once the user reaches it, then you can do it using the afterLoad or the onLeave events.

Here you have a living example of this use: http://alvarotrigo.com/fullPage/examples/callbacks.html

Your initialization should look similar to:

$.fn.fullpage({
    'afterLoad': function (anchorLink, index) {
        //for section 2...
        if (index == 2) {
            //whatever
        }
    },

    'onLeave': function (index, nextIndex, direction) {
        //going from section 3 to 4
        if (index == 3 && direction == 'down') {
           //whatever
        }

        //going form section 3 to 2
        else if (index == 3 && direction == 'up') {
           //whatever
        }
    }
});

If what you want is to do something on the slides rather than on the sections, then you should use the even afterSlideLoad.