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

【问题标题】：fullpage.js horizontal slider dots with tooltipsfullpage.js 带有工具提示的水平滑块点
【发布时间】：2016-03-24 21:31:34
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery carousel slideshow fullpage.js

【解决方案1】：

fullpage.js 没有提供一种方法来做到这一点，正如您在 this open issue 中看到的那样。

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

【讨论】：

您能否提供更多有关如何停用水平滑块的每个导航项目符号的信息？
只需在每个fp-nav a 元素中添加或删除active 类。

【解决方案2】：

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

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

<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();

有效！ :)

【讨论】：