时间戳

首页 > 解决方案 > 如何在 fullpage.js 中自定义导航点？

javascript - 如何在 fullpage.js 中自定义导航点？

问题描述

我在我的项目中使用 fullpage.js。我使用 div id menu 进行导航和菜单，但我想自定义屏幕右侧的导航点，以便最后一个点导航到第一页，而第一个点导航到最后一页。

我想按降序排列导航点。可能吗？

new fullpage('#fullpage',{
  autoScrolling: true,
  navigation: true,
  anchors: ['part1','part2','part3','part4','part5'],
  navigationTooltips:['5','4','3','2','1'],
  showActiveTooltip: true,
})
<ul id='menu' style="list-style: none; padding-left: 0;">
  <li data-menuanchor="part1"><a href="#part1"  style="display: none;"></a></li>
  <li data-menuanchor="part2"><a href="#part2"  style="padding-top: 0px;"><span>OUR SERVICES</span></a></li>
  <li data-menuanchor="part3"><a href="#part3" ><span>OUR COMPANY</span></a></li>
  <li data-menuanchor="part4"><a href="#part4" ><span>SWIFT CONSERVATION</span></a></li>
  <li data-menuanchor="part5"><a href="#part5" ><span>BLOGS</span></a></li>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</ul>

标签： javascripthtmlcssfullpage.js

解决方案

您基本上可以用自己的 CSS 覆盖默认 CSS。例如，要使用红色子弹：

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    background: red;
}

您可以在 css 文件中看到默认应用的样式： https ://github.com/alvarotrigo/fullPage.js/blob/master/src/fullpage.css

您还可以在fullpage.js 扩展页面上找到数十个预定义的导航项目符号来购买。

推荐阅读