循环 2:寻呼机仅显示指向第一张幻灯片的链接并隐藏其他幻灯片

Question

我正在使用带有轮播插件的 Cycle2。我尝试将他们的寻呼机功能添加到我的页面，如下所示：

首先，我创建了容器div：

<div id="concluidos-navigation" class="cycle-pager"></div>

然后，我像这样设置插件选项：

<ul class="cycle-slideshow"
            data-cycle-slides="> li"
            data-cycle-fx=carousel
            data-cycle-allow-wrap=false
            data-cycle-pager="#concluidos-navigation"
        >

对于第一张幻灯片，生成的 HTML 是这样的：

<span class="cycle-pager-active">•</span>

但对于其他每张幻灯片，结果是：

<span style="display: none;">•</span>~

这种"显示：无"从何而来？我错过了什么吗？如果我检查 Chrome 上的元素并删除"显示：无"，则会显示所有链接并完美地在幻灯片之间导航。

这是小提琴

Answer 1

好的，我能够通过覆盖默认样式来使用解决方法来修复它。首先，我将其添加到插件初始化中：

data-cycle-pager-template="<strong class='cycle-pager-nav-circle'><a href=#></a></strong>"

然后我在"cycle-pager-nav-circle"类中添加了一个CSS规则：

display: inline-block !important;

但是，如果有人作为更干净的解决方案，请给出您的建议。

Answer 2

hide-non-active可能是原因。它默认为 true .[链接]。