javascript - Swiper 和 FullpageJS 滚动

Question

我对这两个有一个小问题。我在整个页面滚动中使用 FullpageJS，在一个部分中使用 Swiper。

我的页面包含 3 个部分:

1. 带有一些文本和主菜单的介绍部分

2. 我放置 Swiper 的产品部分

3.以联系表单和页脚结束部分。

FullpageJS 仅在这些之间滚动。

这是我的刷卡代码:

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,
        }
    });

如您所见，滑动器是由鼠标滚动控制的。这是我的 fullpageJS 代码:

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

当 #products 部分出现在屏幕上时，“normalScrollElements”会阻止 fullpageJS 滚动。

我面临的问题是 Swiper 方法“isEnd”执行速度太快。产品部分包含全宽和全高 Swiper 容器，包含 10 张幻灯片。

我想要做的是当我在上一张幻灯片后使用鼠标滚轮时告诉 Swiper 滑动到下一部分。 “isEnd”方法有效，但不符合我的意愿。

当幻灯片 9 更改为幻灯片 10 时，它会同时向下滚动页面，所以我实际上看不到那里有什么。我需要从第 3 部分滚动到第 2 部分才能看到它。我想调用 $.fn.fullpage.moveSectionDown();
仅当我尝试在幻灯片 10 之后滚动时。

Answer 1

我所要做的就是使用“reachEnd”。

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

添加“setTimeout”后，页面不再在幻灯片 9 和 10 之间滚动:)