fullpage.js如何创建幻灯片自定义图像导航点？

Question

我在项目中使用fullPage.js全页滑块。但我需要自定义图像作为导航点。我也搜索了fullPage文档。但我无法找到解决方案。任何人都知道这一点，提前谢谢。

Answer 1

您可以使用menu选项。 您可以使用它创建任何类型的菜单/导航，它会将active类添加到应有的位置。

来自the documentation：

  

菜单：（默认为false）选择器可用于指定要与各部分链接的菜单。这样，滚动部分将使用活动类激活菜单中的相应元素。 这不会生成菜单，但只会将活动类添加到给定菜单中的元素以及相应的锚链接。为了将菜单的元素与部分链接起来，需要使用HTML 5数据标记（data-menuanchor）来使用与部分中使用的相同的锚链接。例如：

如果你想拥有多个菜单/导航，只需使用一个类。

menu: '.myNav'

否则，您还可以使用fullPage.js callbacks或fullPage.js state classes来激活和停用任何导航或菜单中的元素。

检查this answer here。

Answer 2

使用此代码，它将解决您的需求。

＆＃13;

＆＃13;

.fp-slidesNav ul li:hover a.active span{
    background-image:  url("../img/bullets.png");
    height: 22px;
    width: 22px;
    margin: -6px 0 0 -6px;
    border-radius: 100%;
}

＆＃13;

＆＃13;

＆＃13;

此css代码可在滑块上启用子弹图像。