隐藏页面上的 Section/Slide 个箭头 - Fullpage.js

Question

我正在使用 fullpage.js 开发网站： https://github.com/alvarotrigo/fullPage.js/

我遇到的第一个问题是，一旦箭头落入最后一节 and/or 幻灯片，我就需要隐藏箭头。 IE。如果您在最右边的幻灯片上，我希望它会隐藏右箭头。顶部部分、顶部箭头隐藏等

我已经做了很多努力让它发挥作用，我还在学习javascript所以如果我跑题了请原谅我，但我希望这很接近：

    function hideArrowUp() {
        if(index == 1){
            $('.arrowUp').hide();
        }
        else {
            $('.arrowUp').show();
        }
    }

    function hideArrowDown(anchorlink) {
        if(index == 3){
            $('.arrowDown').hide();
        }
        else {
            $('.arrowDown').show();
        }
    }

我希望防止水平滑动 repeating/rolling-over，不确定这是否容易。

拜托谢谢！

Answer 1

只需使用 afterLoad 或 onLeave 等插件回调即可通过使用 javascript 或添加 class.

来删除箭头

您还可以使用 class 类型 fp-viewing-xxxx 添加到您的 body 元素来应用一种或另一种样式。

看看demo page of fullpage.js。在这种情况下，您可以检查 DOM 并查看 body 如何在到达最后一部分时应用 class fp-viewing-4thpage。这是因为它使用了锚点 4thpage，正如您在 URL（#4thpage）中看到的那样。

因此，您可以在 CSS 样式表中执行类似以下操作：

.fp-viewing-4thpage .myArrow{
    display:none;
}

记住演示页面和许多其他示例可用 in the downloaded files。

Answer 2

现在您可以使用 javascript 选项。

当您在 div 上调用整页函数时。只需将选项控制箭头设置为 false。

//call full page function with options.
$('#fullpage').fullpage({
        anchors:['anchor-1','anchor-2'],
        controlArrows: false,
        });

问候亚历克斯

隐藏页面上的 Section/Slide 个箭头 - Fullpage.js

Hiding Section/Slide Arrows on Pages - Fullpage.js

javascript

jquery

fullpage.js