javascript - fullPage 插件在移动设备上无法正常工作

Question

fullPage我的移动版插件有 2 个问题。

1. 尽管我已正确包含所有内容，但我无法浏览我的页面。我有与页面http://bearonunicycle.com/#contact类似的选项，但仍然无法让它在我的网站上运行。当我尝试浏览页面时，我什至无法通过第一部分。

2. 在移动设备上滚动非常困难，我需要滚动整个屏幕最多 5 次才能移动一点。

我的头包括以下内容：

<link rel="stylesheet" href="css/styles.css" >
<link rel="stylesheet" href="css/jquery.fullPage.css" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
<script type="text/javascript" src="script/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="script/jquery.fullPage.min.js"></script>
<script type="text/javascript" src="script/jquery.cycle2.min.js"></script>
<script type="text/javascript" src="script/script.js"></script>

这是初始化代码。

$(function(){
    $('.cycle-slideshow2').each(function(){
        $.cycle2Init($(this));
    });

    $.fn.fullpage({ 
        scrollingSpeed: 250,
        verticalCentered: false,
        resize: false,
        loopHorizontal: false,
        scrollOverflow: true,
        touchSensitivity: 100,
    });
});

Answer 1

检查您没有对 fullpage 和 cycle2 使用相同的类。我在 cycle2 中使用了 .slide 类，并且在包含使用 .slide 作为默认类的完整页面之后，事情变得疯狂。