Fullpage.js滚动时水平滑动 [英] Fullpage.js Slide horizontal on scroll

问题描述

我使用fullpage.js来实现垂直滚动和水平滚动。

我想在第2节滚动时滑动滑块。

功能类似于此网站

这是我的代码：

  $（document）.ready（function（）{
 $ （'#fullpage'）。fullpage（{
 sectionsColor：['＃1bbc9b'，'＃4BBFC3'，'＃7BAABE'，'whitesmoke'，'#ccddff']，
 anchors：[' firstPage'，'secondPage'，'3rdPage'，'4thpage'，'lastPage']，
 menu：'#menu'，
 css3：true，
 loop：false，$ b $如果（索引== 3）{
 $ .fn.fullpage.setAllowScrolling（false）; 
 $ .fn.fullpage.setKeyboardScrolling（false）; 
 $（window）.bind（'mousewheel DOMMouseScroll' ，函数（事件）{
 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）; 
} 
} 
}）; 
} 
} 
}）; 
  

}）;

解决方案

最后得到它的工作：

  var slideIndex = 1，
 sliding = false; 
  

$（document）.ready（function（）{

  $（'＃fullpage'）。fullpage（{
 
 sectionsColor：['＃1bbc9b'，'＃4BBFC3'，'＃7BAABE' ，'whitesmoke'，'#ccddff']，
 scrollingSpeed：1000，
 css3：true，
 $ b $ 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 fa lse; 
 
} 
 
}，
 
 afterSlideLoad：函数（anchorLink，index，slideAnchor，slideIndex）{
 
 sliding = false; 
 
} 
 
}）; 
  

}）;

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 :

解决方案

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;

    }

});

});

这篇关于Fullpage.js滚动时水平滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！