fullPage横向无缝滚动

这几天图森前端进行调整,其中包含首页的banner轮播,计划使用fullPage,但是发现fullPage纵向是可以无缝滚动的,但是横向不可以,也就是说,等最后一张滚动完了,会原路退回到第一章,视觉上非常不好,这里做一下小的调整就能达到横向也无缝滚动的效果。

更改jquery.fullPage.js 1335行,原文是这样的

//isn't there a next slide in the secuence?
if(!destiny.length){
    //respect loopHorizontal settin
    if (!options.loopHorizontal) return;

    if(direction === 'left'){
        destiny = currentSlide.siblings(':last');
    }else{
        destiny = currentSlide.siblings(':first');
    }
}

修改成:

//isn't there a next slide in the secuence?
if(!destiny.length){
    //respect loopHorizontal settin
    if (!options.loopHorizontal) return;
    if (direction === 'prev') {
        if (options.loopHorizontal && options.continuousHorizontal) {
            destiny = currentSlide.siblings(':last');
            currentSlide.before(currentSlide.nextAll('.slide'));
            keepSlidesPosition(currentSlide);
        }else {
            destiny = currentSlide.siblings(':last');
        }
    }else{
        if (options.loopHorizontal && options.continuousHorizontal) {
            destiny = currentSlide.siblings(':first');
            currentSlide.after(currentSlide.prevAll('.slide').get().reverse());
            keepSlidesPosition(currentSlide);
        }else{
            destiny = currentSlide.siblings(':first');
        }
    }
}

然后在配置项,添加:

continuousHorizontal:true

即可实现fullPage横向无缝滚动。

2017-10-16

1 个评论

  • 老郑先森 102 天前

    自动左右滚动:

    setInterval(function(){
       $.fn.fullpage.moveSlideRight();
    },2000);