Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
403 views
in Technique[技术] by (71.8m points)

javascript - Fullpage.js Slide horizontal on scroll

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

Here's my 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);
                    }
                }
            });
        }
    }
});

});

For visual :enter image description here

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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;

    }

});

});


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...