Swiper 和 FullpageJS 滚动答案

【问题标题】：Swiper and FullpageJS scrollingSwiper 和 FullpageJS 滚动
【发布时间】：2018-11-27 04:03:18
【问题描述】：

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

我的页面包含 3 个部分：

带有一些文字和主菜单的介绍部分
我放置 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',
});

"normalScrollElements" 防止 fullpageJS 在#products 部分出现在屏幕上时滚动。

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

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

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

【问题讨论】：

标签： javascript jquery fullpage.js swiper

【解决方案1】：

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

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

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

【讨论】：

我有同样的问题，我应该把reachEnd和setTimeout放在哪里？