Fullpage.js Slide horizontal on scroll

Question

Im using fullpage.js to achieve vertical and horizontal scroll.

i want the slider to slide when i scroll on Section 2.

Functionality similar to this website

Answer 1

Finally got it working :

var slideIndex  = 1,
sliding     = false;

$(document).ready(function() {

$('#fullpage').fullpage({

    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    scrollingSpeed:1000,
    css3: true,

    onLeave: function(index, nextIndex, direction) {

        if(index == 2 && !sliding) {

            if(direction == 'down' && slideIndex < 5) {

                sliding = true;
                $.fn.fullpage.moveSlideRight();
                slideIndex++;
                return false;

            } else if(direction == 'up' && slideIndex > 1) {

                sliding = true;
                $.fn.fullpage.moveSlideLeft();
                slideIndex--;
                return false;

            }

        } else if(sliding) {

            return false;

        }

    },

    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {

        sliding = false;

    }

});

});

Answer 2

Here is a little bit more elaborate example which resumes the code of @undefinedtoken :)

Plan:

Exemple Code :

$(document).ready(function () {

        var slideIndex2 = 1, sliding = false;

        $('#fullpage').fullpage({

            // ...your cutom code...

            //events
            onLeave       : function (index, nextIndex, direction) {
                if (index == 3 && !sliding) {
                    if (direction == 'down' && slideIndex2 < 4) {
                        sliding = true;
                        $.fn.fullpage.moveSlideRight();
                        return false;
                    } else if (direction == 'up' && slideIndex2 > 1) {
                        sliding = true;
                        $.fn.fullpage.moveSlideLeft();
                        return false;
                    }
                } else if (sliding) {
                    return false;
                }

            },
            afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
                sliding = false;
            },
            onSlideLeave  : function (anchorLink, index, slideIndex, direction, nextSlideIndex) {
                if (index == 3) {
                    if (direction == 'right') {
                        sliding = true;
                        slideIndex2++;
                    }

                    if (direction == 'left') {
                        sliding = true;
                        slideIndex2--;
                    }
                }
            }
        });
    });