javascript - 周期 2 : pager only displays link to first slide and hides the others

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>~

这个“display: none”是从哪里来的？我错过了什么吗？如果我检查 Chrome 上的元素并删除“显示:无”，所有链接都会显示并完美地在幻灯片之间导航。

这是 fiddle

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;

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