带有超级幻灯片文本的幻灯片分页

Slide Pagination with Text for SuperSlides

本文关键字：幻灯片 文本 分页      更新时间：2023-09-26

我正在尝试在网站上同时使用超级幻灯片(https://github.com/nicinabox/superslides/(和Foundation 5。

我正在使用 4 张幻灯片，并希望导航不像标准那样"点"，而是按文本。

例如：导航将通过"幻灯片 1"、"幻灯片 2"、"幻灯片 3"和"幻灯片 4"进行。

我没有找到类似的例子，有人可以帮忙吗？

不确定你是否找到了问题的答案。

我遇到了同样的问题，它在文档中不是很清楚。

步骤1

在您的 JS 中调用哈希更改和分页并设置为 true。

$('#slides').superslides({
    hashchange: true,
    pagination: true
});

步骤 2

向滑块元素添加 id，例如：

<img src="/imgs/people.jpeg" alt="home" id="home">

步骤 3

创建一个新的导航并根据需要设置其样式。在每个导航项中创建链接，并将 HREF 链接到已创建的 ID。

 <nav class="extra-nav">
  <a href="#home" class="next">home</a>
  <a href="#about" class="prev">about</a>
  <a href="#end" class="prev">end</a>
</nav>

您的新导航现在应启动与您使用的 IDS 相关的正确幻灯片。

相关文章：