Question

我对这两个问题有点问题。我在整个页面滚动和Swiper的一个部分使用FullpageJS。

我的页面包含3个部分：

包含一些文字和主菜单的简介部分
我放置Swiper的产品部分

3.包含联系表格和页脚的部分。

FullpageJS仅在这些之间滚动。

有我的swiper代码：

let mySwiper = new Swiper('.swiper-container', {
        // Optional parameters
        releaseOnEdges: true,
        direction: 'vertical',
        loop:false,
        centeredSlides: true,
        breakpoints:{
           768:{
               direction:'horizontal',
               slidesPerView: '1.1'
           }
        },
        slidesPerView: '1.65',
        mousewheel: {
            invert: false,
            releaseOnEdges:true,
        }
    });

正如您所见，swiper由鼠标滚动控制。这是我的fullpageJS代码：

$('#fullpage').fullpage({
    controlArrows: false,
    normalScrollElements: '#products',
});

我面临的问题是Swiper方法'isEnd'执行得太快了。产品部分包含全宽和全高Swiper容器，带有10个滑块。

我想要做的是告诉Swiper在最后一张幻灯片后使用鼠标滚轮时滑到下一部分。 'isEnd'方法正在运行但不是我想要的。

当幻灯片9更改为幻灯片10时，它正在向下滚动页面，所以我实际上无法看到那里有什么。我需要从第3节回滚到第2节才能看到它。我想打电话给$.fn.fullpage.moveSectionDown(); 仅当我尝试在幻灯片10之后滚动时。

Answer 1

我所要做的只是使用＆＃34; reachEnd＆＃34;。

on:{
            reachEnd: function () {
                setTimeout(function () {
                    $.fn.fullpage.setAllowScrolling(true);
                },100)
            }
    }

添加＆＃39; setTimeout＆＃39;后，页面不再在幻灯片9和10之间滚动：）

Swiper和FullpageJS滚动

1 个答案: