fullpage.js 带工具提示的水平滑块点

Question

我正在尝试 fullpage.js 并且想使用内置的水平滑块，它非常有用。我缺少的是在每个活动点（以及悬停它们时）显示工具提示的可能性，就像在垂直部分菜单上一样。

我在以下问题中找到了实现此功能的简要指南，最后来自 jfoutch 的评论：horizontal slider using full page.js。我不知道如何使用 jQuery.text() 方法，也不知道从哪里开始。

非常感谢任何帮助！谢谢！

Answer 1

正如您在 this open issue.

中看到的那样，

fullpage.js 没有提供执行此操作的方法

您可以使用 fullpage.js 使用的方法创建您自己的导航，例如 moveTo 并通过使用回调 afterLoad 或甚至 fullpagejs 提供的状态 class fp-viewing-X-Y。

Answer 2

我找到了自己的解决方案来实现水平滑块点上的工具提示！ :)

我正在使用 Bootstrap tooltip.js 插件（因为我已经在网格系统中使用了这个框架）并手动创建了滑块导航来设置 data-toogle 和标题工具提示：

<div class="fp-slidesNav bottom">
    <ul>
        <li><a href="#" class="fp-slide-dots" data-toggle="tooltip" title="Slide 1"><span></span></a></li>
        <li><a href="#" class="fp-slide-dots" data-toggle="tooltip" title="Slide 2"><span></span></a></li>
        <li><a href="#" class="fp-slide-dots" data-toggle="tooltip" title="Slide 3"><span></span></a></li>
   </ul>
</div>

接下来你必须初始化工具提示：

$('.fp-slide-dots').tooltip();

有效！ :)

fullpage.js 带工具提示的水平滑块点

fullpage.js horizontal slider dots with tooltips

jquery

slideshow

carousel

fullpage.js