Fullpage.js - Vertical Scroll with Keyboard

Question

I am hoping someone can help me with my issue below.

I am using Fullpage.js (https://github.com/alvarotrigo/fullPage.js/) plugin to create a site where pages move horizontally. The plugin is designed to create full page sites where it vertically scrolls through each section, by scrolling or pressing down the keys, just like a parallax site.

In my file, I am only using the one section with left and right arrows to contain my multiple pages for horizontal scrolling. Like the example on http://alvarotrigo.com/fullPage/examples/scrolling.html Since I don't have multiple sections, when I hit the up/down keys it doesn't scroll the content at all.

Any suggestions would be greatly appreciated. Thanks in advance!

Answer 1

Just assign the fullpage functions moveSlideRight and moveSlideLeft to your keydown events and turn off the default keyboard scrolling of fullpage.js by using $.fn.fullpage.setKeyboardScrolling(false)

$(document).keydown(function (e) {
    var shiftPressed = e.shiftKey;

    switch (e.which) {
        //up
        case 38:
        case 33:
            $.fn.fullpage.moveSlideLeft();
            break;

        //down
        case 40:
        case 34:
            $.fn.fullpage.moveSlideRight();
            break;

    }
});

Demo online