Im fullpage.js verwenden, um einen vertikalen und horizontalen Bildlauf zu erzielen.

Ich möchte, dass der Schieberegler gleitet, wenn ich in Abschnitt 2 scrolle.

Funktionalität ähnlich wie dieseWebseit

Hier ist mein Code:

$(document).ready(function() {
$('#fullpage').fullpage({
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
    menu: '#menu',
    css3: true,
    loop: false,
    afterLoad: function(anchorLink, index) {
        var loadedSection = $(this);

        //using index
        if (index == 3) {
            $.fn.fullpage.setAllowScrolling(false);
            $.fn.fullpage.setKeyboardScrolling(false);
            $(window).bind('mousewheel DOMMouseScroll', function(event) {
                if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
                    $(".fp-prev").click();
                    if ($(".fp-slide:first-child").hasClass("active")) {
                        $.fn.fullpage.setAllowScrolling(true);
                        $.fn.fullpage.setKeyboardScrolling(true);
                    }
                } else {
                    $(".fp-next").click();
                    if ($(".fp-slide:last-child").hasClass("active")) {
                        $.fn.fullpage.setAllowScrolling(true);
                        $.fn.fullpage.setKeyboardScrolling(true);
                    }
                }
            });
        }
    }
});

});

Für Visualisierung: